如何使用TypeScript在redux数组中找到对象?

jobtbby3  于 2023-06-23  发布在  TypeScript
关注(0)|答案(3)|浏览(142)

这是我的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中的项目?

igsr9ssn

igsr9ssn1#

Redux-Toolkit(RTK)在底层实现了Immer.js,它允许您编写***可变***状态更新,而不是被迫使用旧的***不可变***状态更新,例如浅拷贝所有未更新的状态。在RTK中,您可以直接改变需要更新的状态。
例如,更新Items数组的第6个元素:

reducers: {
  updateItem: (state, action: PayloadAction<iItem>) => {
    state.Items[5] = action.payload;
  }
}

state是一个可变的草稿,所以如果state.Items是一个数组,那么你可以对它使用任何Array方法。
当你“改变”状态时,你实际上并不是在改变state对象,而是它的草稿副本。这是您在控制台日志中看到的proxy对象。如果您想控制台记录reducer函数中的实际“当前”状态值,则从immer库重新导出current函数。使用此选项可包裹拔模状态。
来自immer库的current函数,它获取草稿当前状态的快照并完成它(但不冻结)。Current是调试期间打印current状态的一个很好的实用程序,并且current的输出也可以安全地泄漏到生产者之外。
示例:

import { current } from '@reduxjs/toolkit';

...

reducers: {
  updateItem: (state, action: PayloadAction<iItem>) => {
    ...

    console.log(current(state.Items));
  }
}
khbbv19g

khbbv19g2#

我想你正在使用redux工具包
Rtk正在用immerjshttps://redux-toolkit.js.org/usage/immer-reducers) Package reducer函数。
这允许您通过改变当前状态来计算下一个状态。
Immer通过将状态 Package 在代理中来实现这一点,该代理重新实现了Array的所有方法,如find
如果为了调试而想记录 Package 状态,可以使用immer console.log(current(state))导出的函数current;

7nbnzgx9

7nbnzgx93#

这些项看起来是正确的,只是看起来它们被 Package 在JS Proxy中,目前许多库都在使用它。描述代理超出了这个答案的范围,但通常您应该能够像您期望的那样将state.Items视为普通数组。您可以使用findmapreducefilter以及查找和更新阵列中的项所需的所有内容。

相关问题