Skip to main content

React useReducer hook and how to use it in a small and big application

some little intro about  mutation in javascript 

//befor starting object are mutable means you can change it
//deep copy a object first way
//1
const objectA = { a: 100, b: 100 };
const objectB = { ...objectA };
objectB.a = 200;

console.log(objectB);
//2nd
const objectC = {
  a: objectA.a,
  b: objectA.b
};
objectC.a = 1000;
console.log(objectC);
console.log(objectA);

//another way to create deep copy nested object
let nobject = {
  a: 10,
  b: 20,
  c: {
    name: "manish",
    age: 21
  },
  arr: [1, 2, 3, 4, 5]
};
//deep copy of nobject
let nobject2 = {
  a: 50,
  b: 100,
  c: { ...nobject.c, age: nobject.c.age + 10 },
  arr: [...nobject.arr]
};
console.log(nobject2.c);

//useReducer simple example
import React, { useReducer, useState } from "react";
import "./style.css";
//add your action like const so you can change them from only one place
const Action = {
  INCREMENT: "increment",
  DECREMENT: "decrement"
};

//reducer is a function with two parameter one is current state and other is action. reducer would return a new state based on action or new object. don't mutate current state object just make a deep copy and change it

//don't do
/*
  let obj={
    name:"xyz",
    age:22
  }
  obj.name="abc" 
  you are mutating current object 
*/
//do like this
/*
  let obj1={}; a is different
  let obj2=obj1; same memory reference don't do
  let obj2=[...obj]; deep copy do it
*/


 Learn more about useReducer (hook) below link 

https://reactjs.org/docs/hooks-reference.html#usereducer

why we need useReducer hook

1. state management in react is not that easy as it looks for example if you have a parent component and it contains some child component now you can deal with state changes using props or you can say passing props from parent to child but suppose there is a situation where two component don't have any relationship between them passing props and managing state is not that easy or nearly impossible because that two-component don't have any relationship between each other so one way to get rid of this using Redux which is a predictable state management libarey but now suppose your app is not that big than...

useReducer is a solution here is a small example where using useReducer I am trying to solve a simple count increment problem.

example

step1:- import useReducer from react

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


Step2:-define action 

//add your action like const so you can change them from only one place
const Action = {
  INCREMENT: "increment",
  DECREMENT: "decrement"
};


step3:define reducer which is a pure function and always return a new state 


const simpleReducer = (state, action) => {
  switch (action.type) {
    case Action.INCREMENT:
      return {
        count: state.count + 1,
        action: "plus"
      };
      break;
    case Action.DECREMENT:
      return {
        count: state.count - 1,
        action: "minus"
      };
      break;
    default:
      return state;
  }
};


the full example is below 


https://stackblitz.com/edit/manish-usereducer-simple 


useReducer can be used to solve complex state management problem below is a mid-level todo list using useReducer.


https://stackblitz.com/edit/manish-usereducer-complex


in most cases, you can don't need Redux anymore even for big apps you can easily handle all those state management stuff using usecontext and useReducer.


 



Comments

Post a Comment

Popular posts from this blog

Creating a word Scramble game where you can drag and drop the word and create a complete word. (drag and drop word Scramble game).

Creating a word game using  phaser game engine which is a javascript based gaming engine  where u can drag and drop world like Word Scramble Game and complete a given word. your index.html file look like below < html > < head > < script src = "src/phaser.min.js" ></ script > < script src = "src/wordGame.js" ></ script > < script src = "src/main.js" ></ script > </ head > < body > </ body > </ html > 1.    <script src="src/phaser.min.js"></script> required to run the  phaser game engine. 2. rest of the two files deals with game logics      <script src="src/wordGame.js"></script>       <script src="src/main.js"></script> you can download whole project from https://github.com/manishchauhan/wordgame/tree/master just copy and paste the project in your local server and run ...
Post a Comment
Read more

starting with three.js and react with a very simple example

 1. three.js is undoubtedly the best library to create interactive content for the web in 3d. link https://threejs.org/ a working sample of three with react can be found below https://stackblitz.com/edit/react-7n5qf9?file=src%2FApp.js why choose threejs 1. lightweight  2.fast 3.big community  https://discourse.threejs.org/ 4. even you can use unity or unreal to publish html5 content but i don't think that would be acceptable in many cases. 5. open-source project. i created a running sample with React  https://stackblitz.com/edit/react-7n5qf9?file=src%2FApp.js
Post a Comment
Read more

A simple binary search tree with generic approach tree can store any type of data. (DFS and BFS)

 1. a binary search tree in c++ using a generic approach with both BFS and DFS approach    working tree    https://www.onlinegdb.com/edit/HkuQLdA-w code=> some properties of binary search tree-> 1. binary search tree is not always a balanced tree.  2. Inorder, traversing gives you sorted data.  3.  best is o(log n) and worst is O(n).  4. left node data is always less than root data and right node data always be greater than root data.  5. red-black tree STL map is a balanced binary search tree. *******************************************************************************/ #include <stdio.h> #include<iostream> #include<queue> using namespace std; template < typename T > class Node {   //can store any type of data private:   //genric data or store any type of data   T data;   //reference of left pointer   Node *left = nullptr;   //reference of right pointer   Node *rig...
Post a Comment
Read more