这是我的slice.ts文件。
interface iItem {
Category: string;
Id: string;
}
interface iDataState {
Items: Array<iItem>;
}
const initialState: iDataState = {
Items: [],
};
reducers: {
updateItem: (state, action: PayloadAction<iItem>) => {
console.log(state.Items);
}
}
每次在组件中运行dispatch(updateItem(data));
时,都会看到 Proxy(Array){0:{...}} 在控制台中。
如果无法访问Items
搜索要更新的项目,如何更新Items
中的项目?
3条答案
按热度按时间igsr9ssn1#
Redux-Toolkit(RTK)在底层实现了Immer.js,它允许您编写***可变***状态更新,而不是被迫使用旧的***不可变***状态更新,例如浅拷贝所有未更新的状态。在RTK中,您可以直接改变需要更新的状态。
例如,更新
Items
数组的第6个元素:state
是一个可变的草稿,所以如果state.Items
是一个数组,那么你可以对它使用任何Array方法。当你“改变”状态时,你实际上并不是在改变
state
对象,而是它的草稿副本。这是您在控制台日志中看到的proxy
对象。如果您想控制台记录reducer函数中的实际“当前”状态值,则从immer库重新导出current
函数。使用此选项可包裹拔模状态。来自
immer
库的current
函数,它获取草稿当前状态的快照并完成它(但不冻结)。Current是调试期间打印current
状态的一个很好的实用程序,并且current的输出也可以安全地泄漏到生产者之外。示例:
khbbv19g2#
我想你正在使用redux工具包
Rtk正在用immerjs(https://redux-toolkit.js.org/usage/immer-reducers) Package reducer函数。
这允许您通过改变当前状态来计算下一个状态。
Immer通过将状态 Package 在代理中来实现这一点,该代理重新实现了Array的所有方法,如
find
。如果为了调试而想记录 Package 状态,可以使用immer
console.log(current(state))
导出的函数current
;7nbnzgx93#
这些项看起来是正确的,只是看起来它们被 Package 在JS
Proxy
中,目前许多库都在使用它。描述代理超出了这个答案的范围,但通常您应该能够像您期望的那样将state.Items
视为普通数组。您可以使用find
、map
、reduce
、filter
以及查找和更新阵列中的项所需的所有内容。