Managing App State with Redux Flashcards
What are action and action creators used for?
Changing the state of our application
What is the flow of an action?
Goes through all the reducers. Reducers can then use that action to produce a different value for its particular piece of state
What is redux? Why is it different
We place all of the applications data inside a single object. State in redux is application level state
The application state is generated by what?
Reducers. Application state is an object, parts of the state are identified by key’s, values are created by the reducers
What is a container?
It is a re-act component that has a direct connection to teh state managed by redux. The only time we ever get braidge available where we can take a react component and inject state is a component we call container or ‘smart components’
Give a process review up until containers and reducers
1) Redux serves to construct the application state and react provides the views to display
2) The two libraries are inherently disconnected and it’s only through the use of react-redux that we get a clear connection
3) Application state is generated by reducer functions
4) Added reducer to our combined Reducers call inside index.js in reducers folder
5) This reducer adds a key to global application states, and value is from
6) Created a component, and since it needed to be aware of state we promoted it to a container (smart component). We import connect function, define mapStateToProps and hooked up our container with the connect function and exported
7) Finally, we madsure App took our container and refreshed. Redux state object, mapped state as props to our component, redender with books. Container will rerender as application state changes
Walk through the process of whena user does an action
Walkthrough reducers and actions
1) Redux is in charge of amanging application state. State is a single plain javascript object
2) Application state is different front component state
3) Reducers are application state, combined, and each key has a reducer and responsible for the piece of application state
4) Our reducers are in charge of changing app state through actions, each reducer has opportunity to return based on update
5) Action creators - functions that are actions, objects, actions must have a type defined with a payload