[TOC] ## 概述 react 使用 immer 更簡潔的更新復雜 state ## 安裝 ``` npm install immer ``` 如果需要 use-immer ``` npm install use-immer ``` ## 示例 ### hello world ``` import produce from 'immer'; const state = { count: 0, user: { name: 'John', age: 30 } }; // 更新 state 的 count 和 user.name const newState = produce(state, draft => { draft.count = 1; draft.user.name = 'Alice'; }); console.log(state); // 原始狀態未改變 console.log(newState); // 新的狀態，count 為 1，user.name 為 'Alice' ``` ### 與 useState 結合 方法一: 官方 ``` const [person, setPerson] = useState({ name: 'Niki de Saint Phalle', artwork: { title: 'Blue Nana', city: 'Hamburg', image: 'https://i.imgur.com/Sd1AgUOm.jpg', } }); setPerson({ ...person, // Copy other fields artwork: { // but replace the artwork ...person.artwork, // with the same one city: 'New Delhi' // but in New Delhi! } }); ``` 方式二: 使用 produce ``` setPerson(produce(person, (draft) => { draft.artwork.city = 'New Delhi'; })); ``` 方式三: 使用 useImmer ``` const [person, updatePerson] = useImmer({ name: 'Niki de Saint Phalle', artwork: { title: 'Blue Nana', city: 'Hamburg', image: 'https://i.imgur.com/Sd1AgUOm.jpg', } }); updatePerson(draft => { draft.artwork.city = 'Lagos'; }); ``` ### Reducer 可讓 reducer 更優雅 ``` import React from "react"; import { useImmerReducer } from "use-immer"; const initialState = { count: 0 }; function reducer(draft, action) { switch (action.type) { case "reset": return initialState; case "increment": return void draft.count++; case "decrement": return void draft.count--; } } function Counter() { const [state, dispatch] = useImmerReducer(reducer, initialState); return ( <> Count: {state.count} <button onClick={() => dispatch({ type: "reset" })}>Reset</button> <button onClick={() => dispatch({ type: "increment" })}>+</button> <button onClick={() => dispatch({ type: "decrement" })}>-</button> </> ); } ```