跳到主要内容

从 producers 返回新数据

egghead.io 第9课: 返回全新 state

不需要从 producer 那里返回任何东西，因为 Immer 无论如何都会返回 draft 的（最终）版本。但是，也允许仅仅 return draft。

也允许从 producer 函数中任意返回其他数据。但前提是你没有修改 draft。这对于产生一个全新的 state 很有用。一些例子：

const userReducer = produce((draft, action) => {
    switch (action.type) {
        case "renameUser":
            //可以： 我们修改了当前的 state
            draft.users[action.payload.id].name = action.payload.name
            return draft // 与仅仅 'return' 相同
        case "loadUsers":
            // 可以: 我们返回了一个全新的 state
            return action.payload
        case "adduser-1":
            // 不行: 这不会改变 draft ，也不会返回新的状态
            // 它不会修改 draft（它只是重新声明它）
            // 事实上，这根本没有做任何事情
            draft = {users: [...draft.users, action.payload]}
            return
        case "adduser-2":
            // 不行: 修改 draft 的同时返回了一个新的状态
            draft.userCount += 1
            return {users: [...draft.users, action.payload]}
        case "adduser-3":
            // 可以: 返回一个新的状态。但是，不必要的复杂和昂贵
            return {
                userCount: draft.userCount + 1,
                users: [...draft.users, action.payload]
            }
        case "adduser-4":
            // 可以: immer 的方式
            draft.userCount += 1
            draft.users.push(action.payload)
            return
    }
})

注意：无法以这种方式返回 undefined ，因为它与不更新 draft 没有区别！继续阅读......

使用 nothing 产生 undefined​

因此，一般来说，可以通过从 producer 返回一个新值来替换当前 state，而不是修改 draft。然而，有一个微妙的边缘情况：如果您尝试编写一个想要用 undefined 替换当前状态的 producer：

produce({}, draft => {
    // 什么也不干
})

或者:

produce({}, draft => {
    // 尝试从 producer 中返回 undefined
    return undefined
})

问题在于，在 JavaScript 中，一个不返回任何内容的函数也会返回 undefined！所以 immer 无法区分这些不同的情况。因此，默认情况下，Immer 会假设任何返回 undefined 的 producer 只是试图修改 draft。

但是，为了让 Immer 清楚您有意生成 undefined 值，您可以返回内置标记 nothing：

import {produce, nothing} from "immer"

const state = {
    hello: "world"
}

produce(state, draft => {})
produce(state, draft => undefined)
// 都会返回最初的状态: { hello: "world"}

produce(state, draft => nothing)
// 产生一个新的状态, 'undefined'

注：请注意，此问题特定于 undefined 值，任何其他值（包括 null）都不会受到此问题的影响

提示：为了能够在使用 TypeScript 时从 recipe 中返回 nothing，state 的类型必须接受 undefined 值。

使用 void 的内联快捷方式​

egghead.io 第10课: 使用 _void_ 避免意外的返回

Immer 中的 draft 修改通常需要一段代码块，因为返回表示覆盖。有时候你可能觉得这么多的样板代码很糟心。

在这种情况下，您可以使用 javascripts void 运算符，它计算表达式并返回 undefined。

// 单次修改
produce(draft => void (draft.user.age += 1))

// 多次修改
produce(draft => void ((draft.user.age += 1), (draft.user.height = 186)))

代码风格是高度个人化的，但对于要被许多人理解的代码库，我们建议坚持经典的 draft => { draft.user.age += 1} 以避免认知开销。