柯里化 producers
egghead.io 第六课: 使用柯里化简化代码
将函数作为第一个参数传递给 produce
会创建一个函数,该函数尚未将 produce
应用于特定 state,而是创建一个函数,该函数将应用于将来传递给它的任何 state。这通常称为柯里化。举个例子:
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")
上面的 toggleTodo
模式非常典型;传递一个现有的 state 来 produce
,修改 draft
,然后返回结果。由于 state
除了将其传递给 produce
之外没有其他任何用途,因此可以通过使用 produce
的柯里化形式来简化上面的示例,其中您只传递 produce
recipe 函数,并且 produce
将返回一个应用 recipe 到基础状态的新函数。这允许我们缩短上述 toggleTodo
定义。
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")
请注意,id
参数现在已成为 recipe 函数的一部分!这种拥有 curried producers 的模式与 React 中的 useState
Hook 非常巧妙地结合在一起,我们将在下一页看到。