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() |https://github.com/damienomurchu/react-redux-example/blob/master/src/components/Clicker.js#L18-L25] and [ mapDispatchToProps() |https://github.com/damienomurchu/react-redux-example/blob/master/src/components/Clicker.js#L27-L38] ) and connecting the component to the redux store via [ a connect() method |https://github .
com/damienomurchu/react-redux-example/blob/master/src/components/Clicker.js#L40-L41]
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 |https://github.com/damienomurchu/react-redux-example/blob/master/src/components/Clicker.js#L23] 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 |https://github.com/damienomurchu/react-redux-example/blob/master/src/components/Clicker.js#L33-L35] which is then processed by the [ reducer functions function(s)|https://github.com/damienomurchu/react-redux-example/blob/master/src/main.js#L10-L18] 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 |
|
