Immer에 대한 정보 - Phần 4

Bài dịch từ trang chủ của Immer:
https://immerjs.github.io/immer/

반응 및 몰입

useState + 임머

후크 사용상태 giả định rằng bất kỳ state nào được lưu trữ bên trong nó đều được coi là bất biến. React는 Immer와 같은 구성 요소의 상태를 유지합니다. Ví dụ sau cho thấy cách sử dụngproduce kết hợp vớiuseState và có thể thử trênCodeSandbox .

import React, { useCallback, useState } from "react";
import produce from "immer";

const TodoList = () => {
  const [todos, setTodos] = useState([
    {
      id: "React",
      title: "Learn React",
      done: true
    },
    {
      id: "Immer",
      title: "Try Immer",
      done: false
    }
  ]);

  const handleToggle = useCallback((id) => {
    setTodos(
      produce((draft) => {
        const todo = draft.find((todo) => todo.id === id);
        todo.done = !todo.done;
      })
    );
  }, []);

  const handleAdd = useCallback(() => {
    setTodos(
      produce((draft) => {
        draft.push({
          id: "todo_" + Math.random(),
          title: "A new todo",
          done: false
        });
      })
    );
  }, []);

  return (<div>{*/ See CodeSandbox */}</div>)
}

다음은 setTodos에서 baseState를 생성하는 것입니다. ???
Đây la tham số đầu vào của 농산물:

produce(baseState, recipe: (draftState) => void): nextState

Sau một hồi tìm hiểu, đọc lại doc hóa ra đang sử dụng 카레 생산자. (Giờ mới hiểu phần 카레 프로듀서 :D )

다음은 다음과 같습니다.
ví d ụ trên có thể th 탠시 ³c ³n giản hóa bằng cách sử dụng d ạng curried của produce, trong đó bạn chỉ truyền công thức (recipe) Cho produce và produce. công thức (레시피) tới baseState.

useImmer

Vì tất cả các trình cập nhật state tuân theo cùng một pattern trong đó chức năng cập nhật được bọc trong produce , nên cũng có thể đơn giản hóa điều trên bằng cách tận dụng thư viện use-immer sẽ tự động bọc các chức năng cập nhật trong produce :

import React, { useCallback } from "react";
import { useImmer } from "use-immer";

const TodoList = () => {
  const [todos, setTodos] = useImmer([
    {
      id: "React",
      title: "Learn React",
      done: true
    },
    {
      id: "Immer",
      title: "Try Immer",
      done: false
    }
  ]);

  const handleToggle = useCallback((id) => {
    setTodos((draft) => {
      const todo = draft.find((todo) => todo.id === id);
      todo.done = !todo.done;
    });
  }, []);

  const handleAdd = useCallback(() => {
    setTodos((draft) => {
      draft.push({
        id: "todo_" + Math.random(),
        title: "A new todo",
        done: false
      });
    });
  }, []);

  // etc

데모 데모CodeSandbox

useReducer + Immer

useState, useReducer는 Immer에서 사용할 수 있으며 다음은 다음과 같습니다CodeSandbox.

import React, {useCallback, useReducer} from "react"
import produce from "immer"

const TodoList = () => {
    const [todos, dispatch] = useReducer(
        produce((draft, action) => {
            switch (action.type) {
                case "toggle":
                    const todo = draft.find(todo => todo.id === action.id)
                    todo.done = !todo.done
                    break
                case "add":
                    draft.push({
                        id: action.id,
                        title: "A new todo",
                        done: false
                    })
                    break
                default:
                    break
            }
        }),
        [
            /* initial todos */
        ]
    )

    const handleToggle = useCallback(id => {
        dispatch({
            type: "toggle",
            id
        })
    }, [])

    const handleAdd = useCallback(() => {
        dispatch({
            type: "add",
            id: "todo_" + Math.random()
        })
    }, [])

    // etc
}

useImmerReducer

.. một lần nữa, có thể bị rút ngắn một chút bởiuseImmerReducer từ thư việnuse-immer

import React, { useCallback } from "react";
import { useImmerReducer } from "use-immer";

const TodoList = () => {
  const [todos, dispatch] = useImmerReducer(
    (draft, action) => {
      switch (action.type) {
        case "toggle":
          const todo = draft.find((todo) => todo.id === action.id);
          todo.done = !todo.done;
          break;
        case "add":
          draft.push({
            id: action.id,
            title: "A new todo",
            done: false
          });
          break;
        default:
          break;
      }
    },
    [ /* initial todos */ ]
  );

  //etc

리덕스 + 임머

Redux + Immer는 Redux Toolkit에 포함되어 있습니다. đ redi với redux không có redux 툴킷, b ạn có thể áp dụng th th thuật tương tự như như đã áp dụng us usereducer ở trên : bọc hàm reter bằng produce và b ạ b to to than to than than than than than than than than than than then

Ví dụ:

import produce from "immer"

// Reducer with initial state
const INITIAL_STATE = [
    /* bunch of todos */
]

const todosReducer = produce((draft, action) => {
    switch (action.type) {
        case "toggle":
            const todo = draft.find(todo => todo.id === action.id)
            todo.done = !todo.done
            break
        case "add":
            draft.push({
                id: action.id,
                title: "A new todo",
                done: false
            })
            break
        default:
            break
    }
})