React-Redux Easy Explanation (2/2)
In the previous article I wrote, I went over the Redux Cycle. This article is going to focus on React-Redux. Firstly, why react-redux? As you continue to work on an application, Managing the state can become very convoluted. React-Redux is a State Management System to make managing State easier.
The React-Redux boilerplate:
If you want to create an Action or Reducer it is best practice to create folders names Actions and Reducers on the top level of the src folder. Inside both folders create an index.js file. Now you should have a total of 3 index.js files.
In the initial index.js file that you attach your App.js file to, import {Provider} from 'react-redux' and import {createStore} from 'redux' . Wrap your App component in the providers like so:
Now a lot of your boilerplate is done. From here you can create your actions. inside the index.js file inside of the actions folder, the process is exactly as shown before except with an export statement beforehand. It is important to know you should not but using export default.
In your reducers file, import {combineReducers} from 'redux' and create your reducers. The difference here is exporting the reducers by default.:
The information before was basically recapping and integrating reducers into React this section will cover some glaring differences:
Whichever file you want to call State, you must first import {connect} from 'react-redux' and connect it to your export default like this:
mapStateToProps is a function that also goes inside your connector in order to use your State inside a component. Its job is just as its title says so in your component, you will need to use Props to access the State via the key you pick. it is also important to note that the connect function automatically dispatches.
Lastly, connect the createStore function to your provider to allow the connector to communicate with the Provider so it can send information to your application.
Now you are free to build applications just as you used to except with React-Redux.
