Month: February 2023

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")