React and Redux Part 2
In my article I wrote last week, I talked about the basics of Redux and the fact that we do not need to pass states and props from one file to another, though it was only done in one file. Now this time, I will be showing how to use Redux with multiple files.
To start things off, we need to go to our index.js file. We need to add a line “import { createStore } from ‘redux’” to the file. The purpose of this is to initialize our store so that we can pass it to other files. Next we need to import a Provider to pass the store to the App.js file.
That is the first step, but we are not done here. We will move on to another file then return here near the end. Once we have the createStore, it can be found in the shoppingListItemReducer.js file. We will discuss this further later.
Now, let’s go to the App.js file. In this file, we need to access the store from the index.js file, and that can be solved by importing connect from redux-react.
Figure 2 shows the entire code in our App.js file. We can see at the top we have our connect import to bring in the store data from the index.js file. We can see that we are creating a simple app to click to increase count.
Now, we need to re-render the app once we increase the count because we do not want to refresh the page after the count. First, we log the action; second, we log the updated value; third, we log the previous state. Now we are logging in the state. See figure 3.
Overall, this is what we need to do to change state. We can see that we do not need to pass props and states down directly in Redux. We can simply grab the state or prop through the Provider in index.js and then connect from App.js to index.js to acquire the state count. Maybe I will write another article to discuss this further.
