React Redux tutorials for beginners-5
Welcome to part-5 of the series. You can find part-4 here.We will learn about using redux with react in this part and hence the most practical part.
React-Redux
We will first start with the setup for react-redux. So, open up your terminal and create a new react project by the below command.
npx create-react-app react-redux-demoAfter the installation is done, then change to the directory and npm install the redux and react-redux dependencies.
We will first do the basic setup. So, create a folder components inside src and a file EggContainer.js inside it. For now, put the basic content in it.
Now, remove the basic content from App.js and put the below content in it.
Now, in terminal run npm start and when we move to localhost, we can see the below.
Now, our React redux app is also quite similar to the redux app, which we had created before. It contains the same cycle.
Action
We will first create our Action creator. Create a new folder redux inside src folder. Inside the redux folder, create an egg folder and two files eggActions.js and eggTypes.js.
Put the below content in eggActions.js file. Here, we are creating a simple action creator.
Next, in the eggTypes.js, we will just put the constant.
Reducers
We will next create the Reducers and it will also be similar to the redux thing, which we had learned. So, create a file eggReducer.js inside egg folder and the below content in it.
Here, we are having an initialState and the usual switch case. Inside the switch case, we are returning a new state, by reducing one from the stare.
Redux Store
Now, we will create the store and for that create a file store.js inside redux folder. Here, we are using the reducer to create the store.
Next, we will provide the redux store to our application. We can do this by using it in our App.js. Here, we import it and them wrap the whole jsx of App with the Provider as shown below.
Final Piece
Now the final part of the puzzle, is back in EggContainer.js file. But before doing so, we need to export our action creator, so create a file index.js inside the redux folder and put the simple export statement.
Next, in EggContainer.js we do the following changes. Here, we have two new functions — mapStateToProps and mapDispatchToProps.
The mapDispatchToProps is used to dispatch the action buyEgg to the Action creator and is triggered when we click on the button. It will then trigger the reducer, which will change the state and then the mapStateToProps will receive the updated state. It will trigger a re-render and will show the new Number of Eggs.
We also need to use the HOC connect in react-redux projects.
Now, back to localhost, when we click the button the Number of eggs is decreased.
