Redux is an open-source js library for handling web application state. This library can be used in different web app frameworks such as React and Angular. The following outlines how to use redux in react web applications.

How to install

Create a react app with redux

npx create-react-app my-app --template redux

Otherwise, if you prefer to code by TypeScript you can run the below command:

npx create-react-app my-app --template redux-typescript

By running the above codes, it creates a react app integrated with Redux.

Manual installation of Redux package

npm install redux


yarn add redux

In addition, you need to install react-redux and redux-devtools-extension packages as well:

npm install react-redux
npm install redux-devtools-extension


yarn add react-redux
yarn add redux-devtools-extension

How to implement


import { applyMiddleware, createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension'
import reducers from './reducers';

const middlewares = [];
const store = createStore(reducers, composeWithDevTools(applyMiddleware(...middlewares)));
export default store;

The above code creates a global store by adding reducers and middleware. In this case for simplicity, the middlewares are empty but you can add router and saga middlewares as examples.

Then, it is needed to be added the store to the app (index.js):

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Provider } from 'react-redux';
import store from './store';

<Provider store={store}>


import { combineReducers } from 'redux'
import exampleReducers from "./exampleReducers";
const reducers = combineReducers({
example: exampleReducers,
export default reducers;

Here, as an example, there is just one reducer that is added to the store (exampleReducers.js).

import exampleTypes from './exampleTypes';

const initialState = {
name: '',
age: 0,

const exampleReducers = (state = initialState, action) => {
switch (action.type) {
case exampleTypes.CHANGE_NAME:
return {
name: action.payload
case exampleTypes.CHANGE_AGE:
return {
age: action.payload
return state;

export default exampleReducers;

As you can see, the reducer function is a pure function that returns the updated state. In the above example, there are two different types that can change the state, CHANGE_NAME for changing the name, and CHANGE_AGE for changing the age.


const exampleTypes = {
export default exampleTypes;


import exampleTypes from "./exampleTypes";
const exampleActions = {
changeName: (name) => ({
type: exampleTypes.CHANGE_NAME,
payload: name
changeAge: (age) => ({
type: exampleTypes.CHANGE_AGE,
payload: age

export default exampleActions;


const exampleSelectors = {
getName: (state) =>,
getAge: (state) => state.example.age,

export default exampleSelectors

How to use in react functional component

const dispatch = useDispatch();

And for getting the value of the variable in the state we use useSelector:

const name = useSelector(exampleSelectors.getName);

Finally, this is how to dispatch an action and show an state value on a react component (App.js):

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import exampleSelectors from './exampleSelectors';
import exampleActions from './exampleActions';

const App = () => {
const dispatch = useDispatch();
const name = useSelector(exampleSelectors.getName);
const age = useSelector(exampleSelectors.getAge);

}, []);

return (
<div>Name: ${name}</div>
<div>Age: ${age}</div>

export default App;

The next step is adding Redux Saga: click here

Web Developer