Global State : useReducer and useContext 


import React,{createContext,useState,useReducer} from "react";

export const initState={
    Name:'sabir',
    Contact:'454334',
    Roll:'1110',
    Count:0
}

export function Student(state,action) {

    switch (action.Type) {
        case "SetStudent":
            return {
                Name:action.Name,
                Contact:action.Contact,
                Roll:action.Roll,
            };
        case "In":
            return {Count:state.Count+1};
        case "De":
            return {Count:state.Count-1};
    }
}

//==========Context API=========
//==========Step1==========
export const StudentContext=createContext();

//=====Step2====
export  function StudentDIV({children}){
    const [theme,setTheme]=useState('Light');

    const [state,dispatch]=useReducer(Student,initState);
    return (

        <StudentContext.Provider value={{theme,setTheme,state,dispatch}}>
            {children}
        </StudentContext.Provider>
    );
}

===========Use======Index.js====

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {StudentDIV} from "./State/Gstate";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    // <App />
  <React.StrictMode>
      <StudentDIV>
          <App />
      </StudentDIV>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();


//===========Use in Component

// const [state,dispatch]=useReducer(Student,initState);
 const {state,dispatch,setTheme}=useContext(StudentContext);



 






 

Comments

Post a Comment

Popular posts from this blog

App 1st User Define Component

  import logo from './logo.svg' ; import './App.css' ; import React from "react" ; function App () { let products=[ 1 , 2 , 3 , 4 , 5 , 6 ] ; return <> <h1> Sabirs </h1> { products. map ((item)=>( <ProdoctCard src = {item} /> )) } </> ; } export default App ; function ProdoctCard ({src}) { return <img src = { `./img/ ${src} .webp` } /> ; }
Read more

Example 1

 //====================Component A================== import React , { useState } from "react" ; import B from "./B" ; export default function () { const [name , setName]= useState ( null ) ; return ( <div> <h1> A component </h1> <input value = {name} onChange = {(event)=>setName(event. target . value )} placeholder = { 'Please input name' } /> <h1> {name} </h1> <hr/> <B a = {name} setA = {setName} /> </div> ) }  //====================Component B================== export default function (obj) { //{a,setA} return ( <div> <h1> B component </h1> <input value = {obj. a } onChange = {(event)=>obj. setA (event. target . value )} placeholder = { 'Please input name' } /> <h1> {obj. a } </h1> <hr/> </div> ) }
Read more

Rabiit

Image
   ///==========================Css============== . box-pos { position : relative ; height : 200 px ; backgroundColor : "#e9ecef" ; } . rabit { position : absolute ; bottom : 19 px ; } . start-game-panel { background : #000000bf ; position : absolute ; top : 0 px ; bottom : - 13 px ; right : 0 px ; left : 0 px ; display : flex ; justify-content : center ; align-items : center ; } . img-d { width : 400 px ; } ====================React JS Componant================= import React , { useState , useRef } from "react" ; import "bootstrap/dist/css/bootstrap.min.css" ; import "./rabit.css" ; import "./test.css" ; //============Main Componant export function TestGame () { const [isGameOver , setIsGameOver]= useState ( false ) ; const [isGameStart , setIsGameStart]= useState ( false ) ; const [rabitPos , setRabitPos]= useState ( 0 ) ; const [score , setScore]= useState (...
Read more