10 | MobX concept demos with React and TypeScript. 11 |
12 |13 | Click through the links above to check out the different demos. 14 | If you have any suggestions or questions, 15 | please open an issue! 16 |
17 |18 | See the GitHub project for 19 | source code and a discussion on the project's motivation and findings. 20 |
21 |20 | MobX makes React components automatically react to the data changes 21 | that their render funtions implicitly depend on. 22 | No explicit subscriptions are needed to achieve granular re-renders. 23 |
24 |24 | This experiment demonstrates a simple todo list. 25 | Some of the concepts introduced here include filtering arrays via computed properties, 26 | composing models within a store, performing actions both on the store and models, 27 | and defining second-order computed properties. 28 |
29 |21 | MobX offers a strategy for side-loading data into components with mobx-react's `@inject`. 22 | This is similar to `@connect` in Redux. Both MobX and Redux use a top-level `Provider` 23 | that provides a store or stores in the React context. 24 | The decorators select these stores from the context in a 25 | higher-order component and inject them into the target component's props. 26 |
27 |28 | This example passes data into the child components both through props 29 | and by injecting the store directly. Notice that the components rerender only 30 | a single time on a change even though their props and observed store state both change. 31 |
32 |20 | MobX has a simple way to produce derived data via computed properties. 21 | Note that even though `fullName` is read from the store multiple times, 22 | it is computed only once each time the data changes. 23 |
24 | 58 |31 | MobX dynamically updates a component's dependencies on each render. 32 | This component stops reading the counter for the 4th and 5th clicks, 33 | so the render count should not increment for them. 34 | Not reading the counter simply means 35 | not accessing it on the store during the render function. 36 | It resumes watching the counter starting with the 6th click. 37 | Clicking the counter 10 times should cause only 8 renders, but the click 38 | count should be 10. 39 |
40 |23 | MobX rerenders React components with granular precision when their observed data changes. 24 | When using React with a library like Redux that relies on immutable data, 25 | changing an item in a collection requires changing 26 | the references of both the item and its collection 27 | (and all other references up the state tree), 28 | causing a rerender of any components that use the collection. 29 |
30 |31 | In this example, notice how toggling an item does not cause the list to rerender. 32 | This is because MobX automatically rerenders only the components 33 | which could actually be affected by the data changes. 34 |
35 |36 | Note that it is possible, though more complex, to work around 37 | this behavior of immutable data as seen 38 | in this Redux TodoMVC project. 39 | The basic idea is that you store items in a centralized unrendered collection, 40 | create a separate collection of ids for rendered collections, 41 | and connect/select each item by id in the item component, 42 | so changing an item does not change a rendered collection, only the unrendered one. 43 |
44 |20 | Actions in MobX are 21 | functions that mutate observable data. 22 | Using actions is optional unless `mobx.useStrict(true)` is used. 23 | Combined wih the MobX devtools, they achieve many of the same benefits 24 | that actions in Redux, Flux, and other event sourcing patterns provide. 25 |
26 |27 | Mutations during an action are batched in a transaction, 28 | so downstream data that depends on the changes does not update 29 | until the action completes. 30 |
31 |32 | MobX allows you to react to any observable data changes via `reaction` and `autorun`, 33 | which have similar purposes but different characteristics. 34 | In this example the observable counter is watched by a reaction and the number of times 35 | it appears to change is tracked as the "counter reaction count". 36 | It is also watched by an autorun which is counted as "counter autorun count". 37 |
38 |39 | In this example, the counter is mutated many times on every click. 40 | It demonstrates how two types of downstream data, 41 | computed properties used in a React component and reactions/autorun, 42 | will run only a single time when the upstream data changes are wrapped in an action. 43 |
44 |