- Notifications
You must be signed in to change notification settings - Fork101
Use immer to drive state with a React hooks
License
immerjs/use-immer
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A hook to useimmer as a Reacthook to manipulate state.
npm install immer use-immer
useImmer(initialState) is very similar touseState.The function returns a tuple, the first value of the tuple is the current state, the second is the updater function,which accepts animmer producer function or a value as argument.
When passing a function to the updater, thedraft argument can be mutated freely, until the producer ends and the changes will be made immutable and become the next state.
Example:https://codesandbox.io/s/l97yrzw8ol
importReactfrom"react";import{useImmer}from"use-immer";functionApp(){const[person,updatePerson]=useImmer({name:"Michel",age:33});functionupdateName(name){updatePerson(draft=>{draft.name=name;});}functionbecomeOlder(){updatePerson(draft=>{draft.age++;});}return(<divclassName="App"><h1> Hello{person.name} ({person.age})</h1><inputonChange={e=>{updateName(e.target.value);}}value={person.name}/><br/><buttononClick={becomeOlder}>Older</button></div>);}
(obviously, immer is a little overkill for this example)
When passing a value to the updater instead of a function,useImmer hook behaves the same as useState hook and updates the state with that value.
importReactfrom'react';import{useImmer}from'use-immer';functionBirthDayCelebrator(){const[age,setAge]=useImmer(20);functionbirthDay(event){setAge(age+1);alert(`Happy birthday #${age} Anon! hope you good`);}return(<div><buttononClick={birthDay}>It is my birthday</button></div>);}
Obviously if you have to deal with immutability it is better option passing a function to the updater instead of a direct value.
Immer powered reducer, based onuseReducer hook
Example:https://codesandbox.io/s/2zor1monvp
importReactfrom"react";import{useImmerReducer}from"use-immer";constinitialState={count:0};functionreducer(draft,action){switch(action.type){case"reset":returninitialState;case"increment":returnvoiddraft.count++;case"decrement":returnvoiddraft.count--;}}functionCounter(){const[state,dispatch]=useImmerReducer(reducer,initialState);return(<> Count:{state.count}<buttononClick={()=>dispatch({type:"reset"})}>Reset</button><buttononClick={()=>dispatch({type:"increment"})}>+</button><buttononClick={()=>dispatch({type:"decrement"})}>-</button></>);}
About
Use immer to drive state with a React hooks
Resources
License
Uh oh!
There was an error while loading.Please reload this page.