Worked on this yesterday evening & night.
Simple example of implementing redux in an application [here|https://bitbucket.org/murchu/react-redux-example/src/master/].
Core essentials of redux are the concepts of a centralised store for all state data, reducer functions whose role is to create a new updated state and swap with the current state, and actions which are the triggers in our app to send intents to redux to update our state.
A high level overview of redux would be that it houses all the state for your application, and components that need to access/ modify that state do so by implementing 2 methods (mapStateToProps() and mapDispatchToProps() ) and connecting the component to the redux store via a connect() method.
If a component needs to access state from the redux store, you specify what state properties you need to access in mapStateToProps() where you map that property to a prop which redux makes accessible to the component. To update a property in the global state you do so in mapDispatchToProps() where you specify & implement your intent to change the state via a dispatch which is then processed by the reducer functions you've specified.
Few other notable things:
- it is preferred to create just one redux store (a single source of truth), and use this to track all the state in your application
- if a component is connected to the redux store, redux will look after rendering updates to your component & will re-render your component if a state property or prop changes
- reducer functions are pure functions
- reducer functions should not mutate the state passed in - it should create a new state with the changes & return that. This is critical, as unless you return a new state object, redux will detect changes to any affected components & will not re-render/ update them |
|
