userreducer1

-

 https://react.dev/reference/react/useReducer


....use cases:---


1:-use full when u have closely related piece of state

2:usefull when future state value is depends on current state

import React,{useReducer} from 'react'
function reducer(state=count, action) {
    if (action.type ==='increment' ) {
      return {
...state//future point to hold state values
       count:state.count+1
      };
    }
    if (action.type ==='decrement' ) {
        return {
         count:state.count-1
        };
      }
      if (action.type ==='multiply' ) {
        return {
         count:state.count*5
        };
      }
    }
export default function Random1() {
    const [state, dispatch] = useReducer(reducer, { count: 0 });
   
   
  return (
    <div>
        {state.count}
        <button onClick={()=>{dispatch({type:'increment'})}}>increment</button>
        <button onClick={()=>{dispatch({type:'decrement'})}}>decrement</button>
        <button onClick={()=>{dispatch({type:'multiply'})}}>multiply</button>
    </div>
  )
}

....use cases:---

import React, { useReducer,useState } from 'react'

export default function CounterPage() {
   
    const INCREMENT_COUNT='increment-count';//tells the action type
    const DECREMENT_COUNT='decrement-count';
    const ADD_VALUE_TO_COUNT='add-value-to_count';
    const reducer=(state,action)=>{
        if (action.type ===INCREMENT_COUNT ) {
            // console.log('hello');
            return {
             ...state,//future point to hold state values
             count:state.count+1
            };
          }
          if (action.type ===DECREMENT_COUNT ) {
            // console.log('hello');
            return {
             ...state,//future point to hold state values
             count:state.count-1
            };
          }

          if (action.type ==='change-value-to-add' ) {
            // console.log('hello');
            return {
             ...state,//future point to hold state values
            valueToAdd:action.payload//set to value
            };
          }

          if (action.type ===ADD_VALUE_TO_COUNT ) {
            // console.log('hello');
            return {
             ...state,//future point to hold state values
             count:state.count+state.valueToAdd
            };
          }
          return state;//atlease current state..
    }
    const [state,dispatch]=useReducer(reducer,{
        count:0,
        valueToAdd:0
    })
    const handleChange=(e)=>{
        const value= parseInt(e.target.value)||0;
// console.log(value);
dispatch({
    type:'change-value-to-add',
    payload:value
});
// setValueTOAdd(value);
    }
  return (
    <div>
      {state.count}
      <button onClick={()=>{dispatch({type:INCREMENT_COUNT})}}>add</button>
      <button onClick={()=>{dispatch({type:DECREMENT_COUNT})}}>sub</button>
      <input type="text"  value={state.valueToAdd||''}
          onChange={handleChange}/>
      <button onClick={()=>{dispatch({type:ADD_VALUE_TO_COUNT})}}>add</button>

    </div>
  )
}

1:--

import React, { useReducer,useState } from 'react'

export default function CounterPage() {
   
    const INCREMENT_COUNT='increment-count';//tells the action type
    const DECREMENT_COUNT='decrement-count';
    const ADD_VALUE_TO_COUNT='add-value-to_count';
    const reducer=(state,action)=>{
        if (action.type ===INCREMENT_COUNT ) {
            // console.log('hello');
            return {
             ...state,//future point to hold state values
             count:state.count+1
            };
          }
          if (action.type ===DECREMENT_COUNT ) {
            // console.log('hello');
            return {
             ...state,//future point to hold state values
             count:state.count-1
            };
          }

          if (action.type ==='change-value-to-add' ) {
            // console.log('hello');
            return {
             ...state,//future point to hold state values
            valueToAdd:action.payload//set to value
            };
          }
          if (action.type ==='add_value_S' ) {
            // console.log('hello');
            return {
             ...state,//future point to hold state values
             selectValue:action.payload,//state change
             //set to value
             count:state.count+action.payload
            };
          }

          if (action.type ===ADD_VALUE_TO_COUNT ) {
            // console.log('hello');
            return {
             ...state,//future point to hold state values
             count:state.count+state.valueToAdd
            };
          }
          return state;//atlease current state..
    }
    const [state,dispatch]=useReducer(reducer,{
        count:0,
        valueToAdd:0,
        selectValue:0
    })
    const handleChange=(e)=>{
        const value= parseInt(e.target.value)||0;
// console.log(value);
dispatch({
    type:'change-value-to-add',
    payload:value
});
    }
const handleSelect=(e)=>{
    const svalue= parseInt(e.target.value)||10;
// console.log(value);
dispatch({
type:'add_value_S',
payload:svalue
});
}


// setValueTOAdd(value);


   
  return (
    <div>
      {state.count}
      <button onClick={()=>{dispatch({type:INCREMENT_COUNT})}}>add</button>
      <button onClick={()=>{dispatch({type:DECREMENT_COUNT})}}>sub</button>
      <input type="text"  value={state.valueToAdd||''}
          onChange={handleChange}/>
      <button onClick={()=>{dispatch({type:ADD_VALUE_TO_COUNT})}}>add</button>

      <select value={state.selectValue||''} onChange={handleSelect}>
        <option>10</option>
        <option>15</option>
        <option>20</option>
        <option>25</option>
        <option>30</option>
      </select>

    </div>
  )
}

2:-- u can change the code in switch case





Comments

Post a Comment

Popular posts from this blog

interview questions js[ Anurag Singh ProCodrr]

-
 javascript:- nderstanding-the-difference-between-pure-and-impure-functions-in-javascript/ pure function:- that does not change outside value of the function 1: function geek(value) {      return value+100;  }     console.log(geek(34));  2: function capitalize(str) {    return str.toUpperCase();  }     console.log(capitalize('geeks')); ............................. lamda function[anonymous function] doesnt have name Lambda functions are pure functions in Javascript. let multiply = (a, b) => a * b; console.log(multiply(5, 9)); const Names = [   'Mansi',   'Gaurav',   'Akansha',   'Sanya' ]; console.log(Names.map(Names => Names.length));   array.slice[parts the array] gives array returns The slice() method returns selected elements in an array, as a new array. The slice() method selects from a given start, up to a (not inclusive) given end. The slice() method does not change the origi...
Read more

reactnative_creation

-
 [EAS Build Service]:--for production Alternative:-- expo managed workflow:- expo go:-expo init projectname:-[built in feature] easy to setup and workflow quick &fictionless development no or very little congiguration you can build(cross-platform) standalone apps expo Bare workflow: [own native code android ] relatively easy to setup and work with convenient development some configuration required you can build(cross-platform) standalone apps [react native cli] setup:-- android studio jdk java setup xcode install react cli: more complex setup conveninent development can require more configuration effort standalone apps are build locally expo bare workflow:--- https://docs.expo.dev/versions/latest/sdk/location/ https://github.com/expo/expo/tree/sdk-51/packages/expo-location u can eject from managed expo  to bear workflow:-- just run  expo eject in terminal continue android package name:-com.companyname.domainname
Read more