在开发 React 应用程序时，状态管理是一个关键问题，而 Zustand 是一个简单且强大的状态管理库，可以与 React 结合使用。在使用 Zustand 时，有时需要更新深层对象中的属性，这可能需要繁琐的手动对象复制。但是，使用 Immer 库可以简化这一过程。
首先，让我们看一下在不使用 Immer 的情况下，如何在 Zustand 中更新深层对象的属性。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| import create from 'zustand';
const useStoreWithoutImmer = create(set => ({
user: {
name: 'Alice',
age: 30,
address: {
city: 'New York',
country: 'USA'
}
},
updateCity: newCity => set(state => ({ user: { ...state.user, address: { ...state.user.address, city: newCity } } }))
}));
export default useStoreWithoutImmer;
|
在上面的示例中，我们使用了展开运算符 (spread operator) 来手动创建新的对象，以更新深层对象中的属性。这种方法可能会变得繁琐，尤其是当对象结构变得更加复杂时。
现在，让我们看看如何使用 Immer 简化这一过程。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| import create from 'zustand';
import produce from 'immer';
const useStoreWithImmer = create(set => ({
user: {
name: 'Alice',
age: 30,
address: {
city: 'New York',
country: 'USA'
}
},
updateCity: newCity => set(produce(state => {
state.user.address.city = newCity;
}))
}));
export default useStoreWithImmer;
|
在上面的示例中，使用了 Immer 提供的 produce 函数，这样就可以直接修改状态对象中的属性，而不必手动创建新对象。
通过以上两个示例的对比，可以清楚地看到使用 Immer 可以大大简化在 Zustand 中更新深层对象属性的过程，减少了手动对象复制的繁琐工作。
在实际项目中，选择使用 Immer 可以让代码更加简洁和易于维护，尤其是当涉及到复杂的对象结构和深层对象属性时。
希望本文能帮助你更好地理解如何使用 Immer 配合 Zustand 来更新深层对象属性，以及比较不使用 Immer 的版本。