Rematch - Redesigning Redux

An introduction to a new way to see Redux.

Transcript

1. Rematch Redesigning Redux
2. /BradHick /bradley-hick /@BradHick About me Bachelor in Information Systems - Lourenço Filho Javascript Developer
3. Rematch ➔ Shawn McKay Currently Javascript developer at semiosBIO - Vancouver https://github.com/shmck medium.com/@shmck
4. Reviewing state management
6. Component state State that exists inside of a single component. In React, think state updated with setState.
7. Relative state State passed from a parent to a child. In React, think props passed as properties on a child component.
8. Provided state State held in a root provider, and accessed by a consumer somewhere down the component tree, regardless of proximity. In React, think of the context API.
9. But, let's think... which components will need which state? What about changes? Where store your state? ...
10. External state
11. State can be moved outside of your view library. The library can then “connect” using the provider/consumer pattern to keep in sync. Most Popular:
15. But, let's think again... Is Redux more performant? Is Redux simpler? Why so much love?
16. But, let's think again... Is Redux more performant? No. It gets slightly slower with each new action that must be handled. Is Redux simpler? Certainly not. Why so much love? ….
17. Redux disadvantage Learning curve time_saved: the time you may have spent developing your own solution; time_invested: the hours invested in reading documentation, taking tutorials, and researching unfamiliar concepts.
18. Rematch A Redux framework
19. Redesigning in 6 areas 1. Setup 2. Simplified Reducers 3. Async/Await over Thunks 4. Two Kinds of Actions 5. No More Action Types As Variables 6. Reducers That Are Action Creators
20. Setup Consider if Redux were based on configuration over composition. Setup might look more like the example on the right.
21. Simplified Reducers Assuming that a reducer is matching on action type, we can invert the params so that each reducer is a pure function accepting state and an action. (Maybe even simpler)... We could standardize actions and pass in only state and a payload.
22. Async/Await over Thunks 1. You dispatch an action, which is actually a function rather than the expected object. 2. Thunk middleware checks every action to see if it is a function. 3. If so, the middleware calls the function and passes in access to some store methods: dispatch and getState. 1. Just async/await
23. A Two Kinds of Actions 1. Reducer action: triggers a reducer and changes state. 1. Effect action: triggers an async action. This might call a Reducer action, but async functions do not directly change any state.
24. No More Action Types As Variables const INCREMENT = 'INCREMENT' is a redundant side effect of the separation of action creators and reducers. Treat the two as one, and there is no more need for large files of exported type strings.
25. Reducers That Are Action Creators Now from count.increment we can generate the action creator from just the reducer.
27. Rematch complete example
28. Comparing Redux & Rematch
29. Comparing Redux & Rematch
30. Comparing Redux & Rematch Redux Rematch simple setup ✔ less boilerplate ✔ readability ✔ configurable ✔ ✔ redux devtools ✔ ✔ generated action creators ✔ async thunks async/await
31. Try Rematch, see if you don’t love it.
32. Thank You! References https://hackernoon.com/redesignin g-redux-b2baee8b8a38 https://github.com/rematch/rematc h/blob/master/docs/purpose.md https://github.com/rematch/rematc h#getting-started /BradHick /bradley-hick /@BradHick