React And Redux Fundamentals With Complete Tutorial

Hello react js developer, in this tutorial i am coming with a brand new tutorial for you which is react redux tutorial. From this tutorial you will learn that how to setup redux in react js application, how to manage state using redux and what is redux actually is.

Redux is a predictable state container for JavaScript apps.It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.

In this tutorial i will give you a complete redux setup with data fetching example from api with redux. I will show this step by step. You will enjoy it i think so. So let's see the setup of redux in react js application and how to use it.

To summarize:

Action

An object setting up information about our data moving into state.

Dispatch

Functions that act as a bridge between our actions and reducers, sending the information over to our application.

Reducer

A function that receives data information from our action in the form of a type and payload and modifies the state based on additional provided data.

State

Where all the data from our reducers are passed into a central source.

First of all we have to download a fresh react app. So install it vai npx command.

npx create-react-app my-app

Now setup redux and react-redux via npm. So run those both command.

npm install redux

//then

npm install react-redux

//then

npm install --save redux-thunk

Now open your root index.js file and paste this following code.

myapp\index.js

Now create the following folder and paste this below code.

myapp\src\store\actions\userAction.js

export const UPDATE_USER = 'UPDATE_USER';

const fetch_user = (dispatch) => {
    fetch('https://reqres.in/api/users')
    .then(res => res.json())
    .then(res => dispatch({type:UPDATE_USER,payload:res.data}))
}

export default fetch_user;

Dispatch receive an object and its has two part, one is type which you can give any name and other is payload which is response data. Hope you got the point. 

Now create the following folder and paste this below code.

myapp\src\store\reducer\useruserReducer.js

import {UPDATE_USER} from '../actions/userAction';

const userReducer = (state = {},{type,payload}) => {
    // console.log(actions)
    switch (type) {
      case UPDATE_USER:
        return payload
      default:
        return state;
    }
}

export default userReducer;

Reducer accept two parameter, one is state and other is actions. In actions we will get our type and payload which are coming from dispatch. So here i directly passing type and payload object.  

Now we have to setup redux. So create the following folder and file and paste those below code to it.

mpapp\src\store\index.js

import {applyMiddleware, combineReducers, compose, createStore} from 'redux';
import userReducer from './reducers/userReducer';
import thunk from 'redux-thunk';

const allReducer = combineReducers({users:userReducer});

const InitialStates = {
  users: []
} 

const middleware  = [thunk];

const store = createStore(allReducer,InitialStates,compose(applyMiddleware(...middleware),window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()));

export default store;

Look, createStore accept three parameter, one is all reducer another is initial state and other is thunk middleware. Here last one is for redux chrome devtools. Now all are set to. We are ready to use redux in our component. 

Now open your App.js file and paste this below code to see the fetching user list.

myapp\src\App.js

if you dont know about useSelector and useDispatch then read this below article.

Read also : Use useSelector and useDispatch in Your React Redux Application

Github Repo: React Redux

Hope it can help you to learn react redux concept.