跳到主要内容

React & Immer

egghead.io 第八课: 使用 Immer 和 useState,或者 useImmer。

useState + Immer

useState hook 假定存储在其中的任何 state 都被视为不可变的。使用 Immer 可以大大简化 React 组件状态的深度更新。下面的例子展示了如何使用 produceuseState ,可以在 CodeSandbox 试试。

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>)
}

useImmer

由于所有 state 的更新都使用 produce 包装的更新模式,所以我们可以通过将更新模式包装在 use-immer 包中来简化上述操作

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

完整的 demo 请参阅 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

同上,可以通过 use-immer 包中的 useImmerReducer 简化 (demo)

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 + Immer 在 Redux Toolkit 的文档中被广泛介绍。对于没有 Redux Toolkit 的 Redux,可以应用与上面应用于 useReducer 相同的技巧:使用 produce 包装 reducer 函数,您可以安全地修改 draft!

例子:

import {produce} from "immer"

// 初始 state
const INITIAL_STATE = [
/* 一系列 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
}
})