Redux

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. You can use Redux together with React, or with any other view library. It is tiny (2kB, including dependencies), but has a large ecosystem of addons available.

Features of React.js: There are unique features are available on React because that it is widely popular.

Use JSX: It is faster than normal JavaScript as it performs optimizations while translating to regular JavaScript. It makes it easier for us to create templates.
Virtual DOM: Virtual DOM exists which is like a lightweight copy of the actual DOM. So for every object that exists in the original DOM, there is an object for that in React Virtual DOM. It is exactly the same, but it does not have the power to directly change the layout of the document. Manipulating DOM is slow, but manipulating Virtual DOM is fast as nothing gets drawn on the screen.
One-way Data Binding: This feature gives you better control over your application.
Component: A Component is one of the core building blocks of React. In other words, we can say that every application you will develop in React will be made up of pieces called components. Components make the task of building UIs much easier. You can see a UI broken down into multiple individual pieces called components and work on them independently and merge them all in a parent component which will be your final UI.
Performance: React.js use JSX, which is faster compared to normal JavaScript and HTML. Virtual DOM is a less time taking procedure to update webpages content.

install Redux toolkit

                
                    npm install @reduxjs/toolkit react-redux

File structure in src folder (use cmd)

    
      mkdir store && cd store && type NUL > index.jsx && mkdir slices && cd slices && type NUL > Userslices.jsx

import createSlice package in file

    
        import {createSlice} from "@reduxjs/toolkit";

create slice

    
        const userSlice = createSlice({
            name: "user",
            initialState: [],
            reducers: {
                addUser(state, action) { 
                    state.push(action.payload)
                },
                removeUser(state, action) { },
                deleteUsers(state, action) { },
            }
        });
        
        export default userSlice.reducer;
        export const {addUser,removeUser,deleteUsers}=userSlice.actions;

create store in store/index.js and import all slices to create store

    
        import { configureStore } from "@reduxjs/toolkit";

    
        const store=configureStore({
            reducer:{
           user:userSlice,
           },
           });
           export default store;

Go to main.jsx then React.StrictMode to Provider

    
        import {Provider} from 'react-redux'
        import store from './store/index.jsx'

    
        ReactDOM.createRoot(document.getElementById('root')).render(
            <Provider store={store}>
            <App />
            </Provider>,
          )

use useDispatch to store data in redux store (send data to redux store)

    
        import {useDispatch} from 'react-redux'

    
        const dispatch=useDispatch();
        const addNewUser=(e)=>{
            dispatch(addUser(e));
              };

Get data from redux store (fetch data)

    
        import { useSelector } from 'react-redux'

    
        const data =useSelector((state)=>state.user)

one slice reducer used in another slice

    
        extraReducers(builder){
            builder.addCase(userSlice.actions.deleteUsers,()=>{
                return [];
            })
        }

CreateAction use to reduce drawbacks of extraReducers

     
        import { createAction } from "@reduxjs/toolkit";

    
       export const clearAllUsers=createAction('clearAllUsers');

    
        extraReducers(builder){
            builder.addCase(clearAllUsers,()=>{
                return [];
            })
        }

Redux

Readux