Redux is a predictable state container for JavaScript apps. As the application grows, it becomes difficult to keep it organized and maintain data flow. Redux solves this problem by managing application’s state with a single global object called Store. Redux fundamental principles help in maintaining consistency throughout your application, which makes debugging and testing easier.

The components of Redux architecture are explained below.

STORE: A Store is a place where the entire state of your application lists. It manages the status of the application and has a dispatch(action) function. It is like a brain responsible for all moving parts in Redux.

Note: Every Redux store has a single root reducer function.

import {createStore} from 'redux'

const store = createStore(rootReducer)

ACTION (What to do): In order to change the state, Redux forces you to dispatch actions, which are plain JavaScript objects. That means, if the state changed, an action must have been dispatched.

export const incNumber = (num)=>{

    return{

    type:"INC",

    payload:num

    }

}

REDUCER (How to do): Reducers are functions that take the application’s current state and action as arguments and return a new state result.

const changeNum =(state,action)=>{

    switch(action.type){

    case "INC": return state+action.payload;

    }

    default: return state;

}

To use React Redux with your React project, install it:

npm install react-redux

Redux Principal
1. Single source of truth
The global state of your application is stored as an object inside a single store.

2. State is Read-Only
The only way to change the state is to dispatch an action.

3. Changes are made with pure functions
To specify how the state tree is transformed by actions, you write pure reducers.

action/index.js

export const IncNumber = () => {

  return {

    type: "INC"

  };

};

export const DecNumber = () => {

  return {

    type: "DEC"

  };

};

src/reducers/counter.js

const initialState = 0;

const ChangeNumber = (state = initialState, action) => {

  switch (action.type) {

    case "INC": {

      return state + 1;

    }

    case "DEC": {

      return state - 1;

    }

    default:

      return state;

  }

};

export default ChangeNumber;

src/reducers/index.js

import ChangeNumber from "./counter";

import { combineReducers } from "redux";

const rootReducer = combineReducers({

  ChangeNumber

});

export default rootReducer;

src/store.js

import { createStore } from "redux";

import rootReducer from "./reducers/index";

const store = createStore(rootReducer);

export default store;

src/index.js

import store from "./store";

import { Provider } from "react-redux";

root.render(

  <React.StrictMode>

    <Provider store={store}>

    <App />

    </Provider>

  </React.StrictMode>

);

src/App.js

import "./styles.css";

import { useSelector, useDispatch } from "react-redux";

import { IncNumber, DecNumber } from "./actions/index";

export default function App() {

  const myState = useSelector((state) => state.ChangeNumber);

  const dispatch = useDispatch();

  return (

    <>

      <div className="App">

        <h1>React Redux {myState}</h1>

        <button onClick={() => dispatch(IncNumber())}>INCREMENT</button>

        <button onClick={() => dispatch(DecNumber())}>DECREMENT</button>

      </div>

    </>

  );

}