npm install react react-redux @reduxjs/toolkit
main.jsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import { Provider } from 'react-redux'
import store from './store.js'
createRoot(document.getElementById('root')).render(
<StrictMode>
<Provider store={store}> {/* Wrap your App inside Provider */}
<App />
</Provider>
</StrictMode>,
)
store.jsx
import { configureStore } from "@reduxjs/toolkit";
const initialState = { count: 0 };
const counterReducer = (state = initialState, action) => {
switch (action.type) {
case "INCREMENT":
return { count: state.count + 1 };
case "DECREMENT":
return { count: state.count - 1 };
default:
return state;
}
};
const store = configureStore({
reducer: counterReducer,
});
export default store;
App.jsx
import { useSelector, useDispatch } from "react-redux";
function App() {
const count = useSelector(state => state.count); // Get state from Redux store
const dispatch = useDispatch(); // Get dispatch function
return (
<>
<button onClick={() => dispatch({ type: "INCREMENT" })}>+</button>
<button onClick={() => dispatch({ type: "DECREMENT" })}>-</button>
<h1>{count}</h1>
</>
);
}
export default App;
src/store.js
import { combineReducers, configureStore } from "@reduxjs/toolkit";
const initial_state = { userid: 1, emailid: "admin@nstest.com" }
const adminreducer = (state = initial_state, {type, payload}) => {
if(type == "SET_VAL") {
console.log("INSIDE SET_VAL case")
return {...state, emailid : payload.emailid }
}
return state
}
const userreducer = (state = { payload: {} }, {type, payload}) => {
if(type == "SET_USER_VAL") {
console.log("INSIDE SET_USER_VAL case")
return {...state, payload : payload }
}
return state
}
const reducer = combineReducers({adminreducer, userreducer})
const store = configureStore({reducer})
export default store;
src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import store from './store';
import { Provider } from 'react-redux';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
);
reportWebVitals();
src/App.js
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Admin from "./components/Admin";
import Contact from "./components/Contact";
import Home from "./components/Home";
import Layout from "./components/Layout";
import User from "./components/User";
function App() {
const mystate = useSelector((state) => state)
return (
<div>
This is app component <br />
{mystate.payload}
<Contact />
<BrowserRouter>
<Routes>
<Route path="/" element={ <Layout />}>
<Route index element={ <Home /> } />
<Route path="admin" element={ <Admin /> } />
<Route path="user" element={ <User /> } />
</Route>
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
src/components/Admin.js
import React, { useEffect } from 'react'
import { useDispatch } from 'react-redux'
export default function Admin() {
const dispatch = useDispatch()
useEffect(() => {
console.log("Hello dispatcher...")
dispatch({ type : "SET_VAL", payload: { "emailid" : "admin@devtest.com"} })
}, [])
return (
<div>Admin</div>
)
}
src/component/User.js
import React, { useEffect } from 'react'
import { useDispatch } from 'react-redux'
export default function User() {
const dispatcher = useDispatch()
useEffect(() => {
console.log("Inside user use effect")
dispatcher({
"type" : "SET_USER_VAL",
payload : { emailid : "user@devtest.com", time: new Date().toJSON().slice(0, 10) }
})
}, [])
return (
<div>User</div>
)
}
Setter and Getter for Redux
store.js
import { combineReducers, configureStore } from "@reduxjs/toolkit";
const appdata = (state = {}, {type, payload}) => {
if(type == "SET_APP_DATA") {
return {...state, [payload[0]]: payload[1] }
}
if(type == "DELETE_APP_DATA") {
return {...state, [payload]: undefined }
}
return state
}
const reducer = combineReducers({appdata})
const store = configureStore({reducer})
export const setRedux = (key, val) => {
store.dispatch({ type : "SET_APP_DATA", "payload": [key, val] })
}
export const getRedux = (key = undefined) => {
return store.getState().appdata[key]
}
export const removeRedux = (key = undefined) => {
store.dispatch({ type : "DELETE_APP_DATA", "payload": key })
}
export default store;
In component
setRedux("username", "admin")
setRedux("email", "admin@nstest.com")
setRedux("phoneno", "9876543210")
getRedux("email")
getRedux("name")
removeRedux("email")
