React - Redux with Example

on
If you are not aware of redux, please read this article before this.


What is Redux? Why we need Redux? When it is required?

Install the React on your machine and install Redux and React-Redux using
npx i redux react-redux
After installing the dependency, we need to create a store for that need to import createSoter and combine reducer

import createStore and combine reducer module from redux

import { createStore, combineReducers } from 'redux';

Syntax to create a store:

createStore(reducer, initial State, Middleware);

const store = createStore(allReducer, initialState);

Note: reducer is required, others are optional

Let’s create a reducer, the reducer is a normal function.

function productsReducer(state = [], action) {
    switch (action.type) {
        case "updateProduct":
            return action.payload;
        default:
            return state;
    }

}
function userReducer(state = '', action) {
    switch (action.type) {
        case "updateUser":
            return action.payload;
        default:
            return state;
    }
}

const allReducer = combineReducers({
    products: productsReducer,
    users: userReducer
})

In this example, we are using more than one reducer so we need to combine them into one reducer
using combinereducer, we can combine all reducers into one.
We set some static data for the initial state

const initialState = {
    products: [{ name: "Android" }],
    users: "Test User"
}

Create an action:

Action is playing a major role to update the store in redux. Reducer is updating the store depending on the action object.

Let's assume an action, is an object it contains the type of action and payload(data)

const userUpdateActions = {
    type: "updateUser",
    payload: "Test User"
}
const updateProductAction = {
    type: "updateProduct",
    payload: [{ name: "ReactJS " },
    { name: "Angular " },
    { name: "VueJS " }]
}

Dispatch:

Dispatch the action to the store using dispatch method, the dispatch method contains the action.


store.dispatch(userUpdateActions);
store.dispatch(updateProductAction);



Full code:

import React from 'react';
import './App.css';

import { createStore, combineReducers } from 'redux';

function productsReducer(state = [], action) {
    switch (action.type) {
        case "updateProduct":
            return action.payload;
        default:
            return state;
    }

}
function userReducer(state = '', action) {
    switch (action.type) {
        case "updateUser":
            return action.payload;
        default:
            return state;
    }
}

const allReducer = combineReducers({
    products: productsReducer,
    users: userReducer
})
const initialState = {
    products: [{ name: "Android" }],
    users: "Test User"
}
const store = createStore(allReducer, initialState);

const userUpdateActions = {
    type: "updateUser",
    payload: "Test User"
}
const updateProductAction = {
    type: "updateProduct",
    payload: [{ name: "ReactJS " },
    { name: "Angular " },
    { name: "VueJS " }]
}
store.dispatch(userUpdateActions);
store.dispatch(updateProductAction);

function App() {
    let data = store.getState();
    let products = data.products;
    return (
        <div className="App">
            {products.map(
                (val, index) => (
                    <p key={index}>{val.name}</p>))
            }

        </div>
    );
}

export default App;

Related Articles

Comments

Post a Comment