Immer - Phần 3에 대해 자세히 알아보기

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

Sử dụng 카레 생산자

Currying 기능을 사용할 수 있습니다.
Thay vì truyền vào cho function 1 lúc nhiều argument, chúng ta lại chuyển kiểu viết đó thành 1 function chỉ nhận 1 argument, nhưng bên trong đó chúng ta lòng các function con bên trong, và return về function con này.

코드 샘플

import "./styles.css";
import React from "react";

export default function App() {
  const [name, setName] = React.useState("mike");
  const handleClick = (name) => (e) => {
    if (name === "minh") {
      alert("currying function");
      console.log(e.target);
    }
  };
  return (
    <div>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <button name="button-test" onClick={handleClick(name)}>
        Click me
      </button>
    </div>
  );
}

양식에 대한 유효성 검사가 필요합니다. (Dự án mình dung là vậy)

Quay lại về 카레 생산자

Viec truyền một hàm làm đối số đầu tiên cho produce sẽ tạo ra một hàm chưa ap dụng produce cho một state cụ thể, mà tạo ra một hàm sẽ ap dụng produce cho bất kỳ state nào được truyền cho nó trong tương lai. currying . 다음은 다음과 같습니다.

import produce from "immer"

function toggleTodo(state, id) {
    return produce(state, draft => {
        const todo = draft.find(todo => todo.id === id)
        todo.done = !todo.done
    })
}

const baseState = [
    {
        id: "JavaScript",
        title: "Learn TypeScript",
        done: true
    },
    {
        id: "Immer",
        title: "Try Immer",
        done: false
    }
]

const nextState = toggleTodo(baseState, "Immer")

Mô hình trên của toggleTodo khá điển hình; 정말 state produce , bản nháp (draft) 당신은 당신이 필요합니다. Vì state không được sử dụng cho bất kỳ điều gì khác ngoài việc truyền tới produce , curried produce , trong đó bạn chỉ truyền công thức (recipe) 초produce 와 produce sẽ trả về một hàm mới, hàm mới này ap dụng công thức (recipe) baseState . Điều này cho phép chúng ta rút ngắn định nghĩa toggleTodo ở trên.

import produce from "immer"

// curried producer:
const toggleTodo = produce((draft, id) => {
    const todo = draft.find(todo => todo.id === id)
    todo.done = !todo.done
})

const baseState = [
    /* as is */
]

const nextState = toggleTodo(baseState, "Immer")

Lưu ý rằng param id hiện đã trở thành một phần của hàm công thức(레시피)!