?? ?? ????? ??? ???? ?? ???? ???? ?????. ??? ??? ?? ???? ?????. ??? ???? ????? React? setState ???? ???? ???? ??? ?????? ??? ??? ?????????.

React? ??? ?? (?? ??? ? ??)??? ??? ????? ??? ?????? ?? ?? ?? ?? ???? ????? ??????.

??? Immer? ???? ????. ? ??? Immer? ???? React State Management? ????? ??? ?? ???. Immer? "??"(??)? ??? ????, ?? ?? ??? ??? ??? ???? ??? ? ????. Immer? ??? ?? ??? ?? ? ?? ?? ??? ??? ??? ?? ??? ???? ???? ?? ??? ? ????. ?? ????? ?????? ????? ??? ??? ?? ? ?? ??? ???????.

?? ??, ?? ???? ??? ??? ????.

 this.state = {
  ?? : 'Kunle',
  ?? : 30,
  ?? : '???',
  ?? : '?????'
}

???? 31 ?? ??? ???? ?? age ? ??? ?????????. immer? ???? ?? ?? (??)? ?????.

? ??? ??? Kunle?? ???? ????? ?? ??? ???????. ?? ? ?? ???? ???? : ?? ??? ???? ???? Kunle?? ?? ???. Kunle? ??? age 31? ??????. ?? ?? ???? ?? ? ????? ??? ???? ?? ? ??? ???? age ? ???????. ???? ??? ??? ??? ??? ???? ?????.

? ??? ?? ??? ?? ???? ?? ??? ?? ??? ??? ???? ????. Immer? ?? ??? ??? ??????.

?? ? : ???

Immer? ?? ??? ??? ?? ????? ?????.

Immer? ???? ?? ?? ??? ??? ????.

 const {produce} = immer;

??? ?? ?? rect.component {
  ?? = {
    ??? : '???', 
    ??? : '??', 
    ?? : '??',
    ?? : "???"
  };

  componentDidMount () {
    this.interVal = setInterVal (() => this.ChangeHandle (), 3000);
  }

  componentWillUnMount () {
    ClearInterval (this.interval);
  }

  ??? ??? ??? = () => {
    this.setstate (
      ?? (draft => {
        draft.red = '???';
        draft.yellow = 'black';
        draft.green = 'black';
        draft.next = '???';
      })
    );
  };

  handleyellowlight = () => {
    this.setstate (
      ?? (draft => {
        draft.red = '??';
        draft.yellow = '???';
        draft.green = 'black';
        draft.next = 'Green';
      })
    );
  };

  handlegreenlight = () => {
    this.setstate (
      ?? (draft => {
        draft.red = '??';
        draft.yellow = 'black';
        draft.green = 'Green';
        draft.next = '???';
      })
    );
  };

  ChangeHandle = () => {
    if (this.state.next === '???') {
      this.handleyellowlight ();
    } else if (this.state.next === 'green') {
      this.handlegreenlight ();
    } ? ?? {
      this.handleredlight ();
    }
  };

  ?? () {
    ?? (
      <div classname="box">
        <div classname="circle" style="{{backgroundColor:" this.state.red></div>
        <div classname="circle" style="{{backgroundColor:" this.state.yellow></div>
        <div classname="circle" style="{{backgroundColor:" this.state.green></div>
      </div>
    );
  }
}

produce Immer? ???? ?? ?????. ??? ??? setState ???? ?? ??? ?????. produce ??? draft ??? ????? ??? ?????. ? ?? ???? draft ??? ??? ? ????.

? ??? ?? ?? ?? :

 const handlelight = (state) => {
  ?? ??? (state, (draft) => {
    draft.red = '??';
    draft.yellow = 'black';
    draft.green = 'Green';
    draft.next = '???';
  });
};

// ?? ???? ?? :
handlegreenlight = () => {
  const nextstate = handlelight (this.state);
  this.setstate (NextState);
};

??? ?? ??? produce ??? ?? ??? draft ????? ??? ?????.

? ?? ? : ?? ??

??? ??? ??? ?? ???? ???? ???????. ?? ?? ??? ?? ? Immer? ???? ?? ???? ??? ??? ????.

?? ? ???? ?? ?? ?? ?? ??? ???.

?? ?? ?? :

 ??? ?? ?? rect.component {
  // ... (??? ? ?? ??) ...

  handlesUbmit = (e) => {
    e.preventDefault ();
    const newitem = {
      ID : uuid.v4 (),
      ?? : this.state.name,
      ?? : this.state.price
    };
    this.setstate (
      ?? (draft => {
        draft.list = draft.list.concat (newitem);
      })
    );
  };

  // ... (?? ???) ...
}

???? ?? ? ?? ?? ??? ?????????. setState ? Extension ??? ?? :

 handlesUbmit = (e) => {
  // ...
  this.setstate ({list : [... this.state.list, newitem]});
};

?? ??? ???? ???? ?? ?? ???? ???? ?? ???? ? ????. Immer? ???? ?? ?? ????.

??? ???? ? ? ?? ??? ????? ????????? ?? ??, ???? ??? ? ??? ????????.

 handlesUbmit = (e) => {
  // ...
  this.setstate (
    ?? (draft => {
      draft.list = draft.list.concat (newitem);
    }), () => {
      this.calculateamount (this.state.list);
    }
  );
};

calculateamount = (list) => {
  ? = 0???;
  list.foreach (item => total = item.price);
  this.setstate (
    ?? (draft => {
      draft.totalamount = Total;
    })
  );
};

??? ?????? ???? ? ??? ?? ? ? ?? ??? ?????.

Immer ??

use-immer ? React ?? ?????? ??? ?? ? ??? ?????. ??? ??? ??? ?????.

 "React"?? React React;
"use-Immer"?? {useimmer} ?? ??;

const ??? = () => {
  const [count, updateCounter] = useImmer ({value : 0});

  ?? ?? () {
    updateCounter (draft => {
      Draft.Value;
    });
  }

  ?? (
    <div>
      <h1>??? {count.value}</h1>
      <button onclick="{increment}">??</button>
    </div>
  );
};

???? ?? ???;

useImmer useState ? ?????. ??? ???? ??? ?????. ?? ??????? ?? ?? useImmer ?? ?? ? ?? ?????. ?? ? ???? ??? ???? ??? ?? ??? ?? increment ??? ?? ? ????.

Immer? ?? useReducer : useImmerReducer ? ??? ??? ?????.

??

?? ?????? Immer? ????? ?? ?? ????? ?? ? ? ????. ?? ?? ??? ??????. ?? ??? Github?? ?? ? ????. (Github ??? ???? ?? ??????)

? ??? React State Management? ?? Immer ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!