How to use Redux with React Hooks and Axios
In my previous tutorial on How to use redux in your react app with Axios I have used a class component to demonstrate using redux with Axios in our project, Today we will see how to use that using React Hooks. The boilerplate will be the same as we have used in the previous tutorial just we’ll start using the useEffect hook instead of the componentDidMount method and also we will use the useDispatch and useSelector hooks from redux. We will use dummy data from jsonplaceholder to fetch user details and display that in our project. So let us see how to use that.
Requirements
- Install all the required libraries running the below command.
yarn add axios redux react-redux redux-thunk redux-devtools-extension2. Now go to your src directory and create a directory with the name store and inside that create actions and reducers directory and also store.js and types.js file.
3. Now we declare some types in our types.js file. So open the file and paste the below code.
4. Now it’s time to configure our store. So open your store.js file and paste the below code.
We are first importing the createStore method to create our store and applyMiddleware method from redux for using thunk as middleware. we are also declaring the initialState variable if we want to use some state at the initialization. The composeWithDevTools method is imported to work with our redux devtools chrome extension. We have also imported rootReducer from our reducer directory which we will create in our next step.
5. Now go to your reducers directory and create a file with the name index.js and paste the below code.
This file is useful as it contains all our reducers in one place. We are first importing our combineReducers method from redux so that we can merge all our reducers which we are importing. we are also importing userReducer which we create in the next step.
6. Inside your reducer folder create a file with the name userReducer.js and paste the below code.
So here we are first importing our GET_USERS and USERS_ERROR type from our types.js file. After that, we are initializing some default states for our users and then we are creating a function and inside that, we are 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 if suppose there is no response from the API or there is an error in calling the API the USERS_ERROR case will set the loading to false and the error will display the error message we will send from our action file. By default, we are calling the state which contains our initialState. Now we will create our action file in the next step but before moving into the next step we will see that whether our chrome devtool is working or not so 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 Provider and pass store as props to store.
Now start your app yarn start , open your chrome developer tools ctrl + shift + c and go to the redux tab and click on state to see the initial state we declared in our userReducer.js file.
7. Now open your actions folder and create a file with the name userAction.js and paste the below code.
This file is responsible to create all our actions like here it’s creating an action to fetch data from the API using the Axios library. So here we are first importing our GET_USERS, and USERS_ERROR constants from the types.js file. After that, we are creating an asynchronous function getUsers which is passing dispatch as a parameter and then using Javascript try catch for catching the response from API. If API sends the response without an 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.
Our redux boilerplate is set up and now it’s time to actually use our data.
8. Go to your src directory and create a directory with the name components and inside that directory create a file users.js and paste the below code.
So here we are importing useDispatch and useSlector hooks from react-redux and our getUsers function from our userAction file. Now inside our functional component, we are passing our useDispatch hook to the dispatch variable. This dispatch is then called inside our react useEffect hook in the first parameter with getUsers as an argument. This will render our getUsers function to fetch data from the API. After that, we are using the useSelector hook to extract data from the store. So we are passing our usersList state to the userListData variable. Now if we console our userListData variable we will find all our states like loading, error, and users. We are then destructuring our userListData and using javascript ternary operator checking if it’s loading then show loading if there is any error display error message else everything is fine iterate our users array with the javascript map function.
Note: usersList inside useSelector is declared in our reducer index.js file. This holds all our users state. If we console.log the state inside useSelector: useSelector(state => console.log(state)) you will get all the states declared in our combineReducer. So this way you can get data from the store to any of your comoponent just call the action file function to that component and use useSelector to call the state to that component.
9. That’s it, now import your users component to App.js and refresh the browser to see changes.
Below I have shared the GitHub repository and Live code for reference.
