Redux

Redux is a state managing library used in JavaScript apps. It is very popular for React and React-Native. It simply manages the state and data of your application.

Building Parts of Redux

Action: Actions are JavaScript object that contains information. Actions are the only source of information for the store.
Reducer: Reducers are the pure functions that contain the logic and calculation that needed to be performed on the state.
Store: Store is an object which provides the state of the application. This object is accessible with help of the provider in the files of the project.

Step to install Redux: Use this command in project directory

npm i @reduxjs/toolkit react-redux

Project Structure:

Depemndencies list after installtin redux in package.json

{
    "name": "myreactapp",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@reduxjs/toolkit": "^1.9.7",
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-redux": "^8.1.3",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"
    }
}

Example: In this example, we have created two buttons one will increment the value and another will decrement the value. With Redux, we are managing the state.

Javascript

// filename - App.js
 
import React from "react";
import "./index.css";
import { useSelector, useDispatch } from "react-redux";
import { incNum, decNum } from "./actions/index";
 
function App() {
    const mystate = useSelector((state) => state.change);
    const dispatch = useDispatch();
 
    return (
        <>
            <h2>
                Increment/Decrement the number using Redux.
            </h2>
            <div className="app">
                <h1>{mystate}</h1>
                <button onClick={() => dispatch(incNum())}>
                    +
                </button>
                <button onClick={() => dispatch(decNum())}>
                    -
                </button>
            </div>
        </>
    );
}
 
export default App;

Javascript

// actions/index.js
 
export const incNum = () => {
    return { type: "INCREMENT" };
};
 
export const decNum = () => {
    return { type: "DECREMENT" };
};

Javascript

// reducers/func.js
 
const initialState = 0;
 
const change = (state = initialState, action) => {
    switch (action.type) {
        case "INCREMENT":
            return state + 1;
        case "DECREMENT":
            return state - 1;
        default:
            return state;
    }
};
 
export default change;

Javascript

// Filenme - reducers/index.js
 
import change from "./func";
import { combineReducers } from "redux";
 
const rootReducer = combineReducers({ change });
 
export default rootReducer;

Javascript

// Filename - store.js
 
import { createStore } from "redux";
import rootReducer from "./reducers/index";
 
const store = createStore(
    rootReducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ &&
        window.__REDUX_DEVTOOLS_EXTENSION__()
);
 
export default store;

Javascript

// Filename - index.js /src directory
 
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App.jsx";
import store from "./store";
import { Provider } from "react-redux";
 
ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById("root")
);

Step to run the application: Open the terminal and type the following command.

npm start

Output: Open the browser and our project is shown in the URL http://localhost:3000/

What’s the difference between useContext and Redux ?

In React, useContext and Redux both approaches provide ways to manage and share state across components. Both work and manage global data to share and access from any component present in the application DOM tree, but they have different purposes and use cases.

Table of Content

useContext
Redux
Difference between useContext and Redux

Tags:

#React-Questions #ReactJS-Advanced #Redux #ReactJS #Web Technologies

useContext

Difference between useContext and Redux

Redux

Building Parts of Redux

Javascript

Javascript

Javascript

Javascript

Javascript

Javascript

What’s the difference between useContext and Redux ?

Similar Reads

Contact Us