Advertisement
Guest User

Untitled

a guest
Jan 31st, 2015
189
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.77 KB | None | 0 0
  1. Flux target API
  2. ===============
  3.  
  4. This is a draft, WiP README Driven Development Wishlist for a Flux API. Don't judge, contribute.
  5.  
  6. Stores
  7. ------
  8.  
  9. ### Definition
  10.  
  11. ```js
  12. var MyStore = Flux.createStore({
  13. initialize: function() {
  14. // constructor
  15. },
  16. getInitialState: function() {
  17. // default state
  18. return {};
  19. },
  20. getState: function() {
  21. // current state
  22. return value;
  23. }
  24. });
  25. ```
  26.  
  27. ### Usage
  28.  
  29. ```js
  30. var myStore = new MyStore(...args);
  31.  
  32. myStore.onChange(function(state) {
  33. console.log(state === myStore.getState()); // true
  34. });
  35. ```
  36.  
  37. Actions
  38. -------
  39.  
  40. ### Definition
  41.  
  42. Actions are defined using a regular array, where entries are action names.
  43.  
  44. ```js
  45. // Simple (dispatcher is an instance of Dispatcher)
  46. var Actions = Flux.createActions(Dispatcher, ["actionA", "actionB"]);
  47. ```
  48.  
  49. #### Ability to create distinct action objects:
  50.  
  51. ```js
  52. var AActions = Flux.createActions(Dispatcher, ["actionA"]);
  53. var BActions = Flux.createActions(Dispatcher, ["actionB"]);
  54. ```
  55.  
  56. Note: We don't care about name conflicts, because listening stores are supposed to react to a single action name the very same way.
  57.  
  58. ## Usage
  59.  
  60. ### Conventions
  61.  
  62. - The name of the action should match the listening store method one;
  63. - Args passed to the action function are applied to the listening store method.
  64.  
  65. ```js
  66. var Actions = Flux.createActions(Dispatcher, ["actionA"]);
  67.  
  68. var Store = Flux.createStore({
  69. actionA: function(a, b, c) {
  70. console.log(a, b, c) // 1, 2, 3
  71. }
  72. });
  73. var store = new Store();
  74.  
  75. Dispatcher.register({store: store});
  76.  
  77. Action.actionA(1, 2, 3);
  78. ```
  79.  
  80. ## Asynchronous actions
  81.  
  82. **There's no such thing as async actions.** Let's keep the initial need simple and flatten the problem; an asynchronous operation should first call a sync action and then make the store triggering new actions dedicated to handling success and failures:
  83.  
  84. ```js
  85. var Actions = Flux.createActions(Dispatcher, [
  86. "actionA",
  87. "actionASucceeded",
  88. "actionAFailed"
  89. ]);
  90.  
  91. var Store = Flux.createStore({
  92. actionA: function(a, b, c) {
  93. setTimeout(function() {
  94. if (Math.random() > .5) {
  95. Actions.actionASucceeded(a, b, c);
  96. } else {
  97. Actions.actionAFailed(new Error("Boom."));
  98. }
  99. }, 50);
  100. },
  101. actionASucceeded: function(a, b, c) {
  102. console.log("yeah", a, b, c);
  103. },
  104. actionAFailed: function(err) {
  105. console.log("oh noes.", err);
  106. }
  107. });
  108. var store = new Store();
  109.  
  110. Dispatcher.register({store: store});
  111.  
  112. Action.actionA(1, 2, 3);
  113. ```
  114.  
  115. Dispatcher
  116. ----------
  117.  
  118. Should stay as simple as possible.
  119.  
  120. ### Registering stores
  121.  
  122. The dispatcher needs to know about the stores to notify with the action events.
  123.  
  124. ```js
  125. var Dispatcher = Flux.createDispatcher();
  126.  
  127. var storeA = new MyStoreA();
  128. var storeB = new MyStoreB();
  129.  
  130. // register stores to be notified by action events
  131. Dispatcher.register({
  132. storeA: storeA,
  133. storeB: storeB
  134. });
  135. ```
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement