##Redux How do you add Redux in a React project? It can be added via npm with the model builder or it can be added as a script tag from CDNjs.
State mutations need to be described as a pure function that take the previous state and action being dispatched and returns the next state of an application. It is important that it does not modify the given state (it must be a pure function) so it returns a new object.
###Store Binds together 3 principles of Redux:
- Holds current app's state objects.
- Lets you dispatch actions.
- Updates state with actions (when it is created, we need to specify the reducer that tells how state is updated with these actions).
3 Important Store Methods:
getState()
— retrieves current state of Redux store.dispatch()
— lets you dispatch actions to change the state of your application.subscribe()
— lets you register a callback that the Redux store will call anytime an action has been dispatched so that you can update the UI of the application to reflect the current application's state.
render()
is called any time the store's state changes (as in ReactDOM.render
in the index).
Object.assign
is new to ES6 and lets you assign properties of several objects onto the target object. (If several sources specify different values for the same property, the last one "wins"/overrides.)
###Reducer The reducer is a pure function written to implement the update logic in your application. Redux compliments this.
- View layer most predictable when described as a pure function of the application's state to implement the update logic.
- It is how the next state is calculated given the current state and the action being dispatched.
- We name reducers after the state keys they manage.
Combine Reducer generates the top level reducer for us. The only argument is an object, which can specify a mapping between the state field name and the reducer managing, delegating paths of the state tree to them (generates one reducer from several other reducers).