How to use redux in your react app with Axios.
Today in this tutorial I’ll show you how to use redux in your react app with Axios to fetch data from API. We will be using API from jsonplaceholder to fetch user details.
What is Redux?
Redux is a state management library that helps us store our state to be accessible by each component.
Requirements
- First, we need to install all these npm libraries for our react application. Run below command to install.
npm install axios redux react-redux redux-thunk redux-devtools-extension --save2. Now open your src directory and create a store directory. Now inside that store directory create two more directories with the name actions and reducers. Also, create two files with the name store.js and types.js
3. First, we will create some types in our types.js file. So open your types.js file and paste the below code
4. Now open store.js file and paste the below code.
here we are importing createstore method for creating the store, applyMiddleware to use thunk as middleware, and declaring initalState to use state at initialization. We have imported composeWithDevTools to work with our redux devtools chrome extension. We have also imported rootReducer from our reducer directory which we haven’t created yet and will create in the below-mentioned step.
5. Go to your reducer directory and create an index.js file and paste the below code.
here we are importing combineReducers from redux to combine all our reducer. we are also importing userReducers which we haven’t created yet and now we will create that in the below-mentioned step.
6. Inside your reducer directory create another file with the name userReducers.js and paste the below code.
here we are first importing our GET_USERS type from our types.js file. After that, we are initializing some states for our users. Now we are creating a function and using a javascript switch case. The GET_USERS case is first returning an object of all the previous state we have declared using the spread operator (…state) after that the users object contains our actions data (action.payload) and lastly loading changing state from true to false. Now we will create our usersAction in the below-mentioned step.
7. Open your actions directory and create an usersActions.js file and paste the below code.
here we are first importing our GET_USERS, USERS_ERROR type from types.js file. we are also importing axios to fetch data from API. After that, we are creating a getUsers function where we are using dispatch as an argument and afterward we are using javascript try catch for catching the response from API. If API sends the response without error it’ll be caught in try and data will be passed to the payload and if there is any error it’ll be caught in catch and response will be passed to the payload.
Note: the payload contains the data which will be passed to the userReducer which is then getting imported to the index.js file which contains users object inside combineReducer method. So ultimately users object inside our combineReducers method contains all our data.
8. Now open your root index.js file and import provider from react-redux and store from store.js file and then wrap your app component with the provider.
Everything is set up correctly. Now if we run our react application and open our chrome dev tool and go to redux we will see that redux is set up correctly and working fine.
Now its time to create our component and use our state.
9. Inside your src directory create a component directory and inside that create users.js file and paste the below code.
here we are importing the connect method from react-redux and getUsers function from our usersAction file. We are then creating a mapStateToProps method that contains the state as arguments and users object and passing that mapStateToProps and getUsers method to the connect method. Note: this users object is internal state which contains state of users from combineReducers method of step 7 note.
After that, we are calling our getUsers function to our componentDidMount lifecycle method using this.props.getUsers(). this will load our data from API. If we check our redux tool from the chrome dev tool we will see GET_USERS is loaded.
Now if we console.log our this.props.users, we will see our users and loading state which we declared in our usersReducer file in step 6.
After that, I have used javascript destructuring to destructure our data const {users}=this.props.users and passed that users variable to javascript map function inside return.
10. Now import your users component to your app.js file and refresh browser to see the changes.
Thanks for reading here is the git repository and live code for reference.
