Working with React-Redux for my final project at Flatiron, I had a change to get a deeper sense of how the React-Redux flow went.
Why use Redux in the first place?
Redux is a great tool to connect the state of our application to whichever components we need. It allows us to set state in a global scope, and to pass props to certain components. This prevents us from ‘prop-drilling’, which is passing down props from parent and grandparent components unnecessarily.
By connecting our app to Redux, we can easily access/change state! To set it up, you need to access the react-redux library, and we import in our top-level file our Provider , like so:
import { Provider } from 'react-redux';The Provider component should wrap around the rest of the application, and pass in the store that we create through createStore as a prop. Now our app can access the Redux store!
But wait!
Inside each component that we need to access the Redux state (not the local state) or dispatch props (other than through a parent to child component), we must call our connect method, which takes in as a first argument mapStateToProps , and an optional second argument mapDispatchToProps .
import {connect} from 'react-redux'class Example extends React.Component {...
}export default connect(mapStateToProps, (mapDispatchToProps))(Example)
Provided you defined both methods, we can call an Action Creator, which produces an action (which is just an object). This Action gets fed to Dispatch, which goes to the Middleware (considering you are using middleware for your project) and it forwards this to a Reducer.
The purpose of the Reducer is to change state. It will take in the previous state and action object as arguments, and it will reduce them to create a new state.
Now you have updated state throughout your application!
