在 Redux-Toolkit 中使用 for 循环的问题

Posted 2023-02-16

【中文标题】在 Redux-Toolkit 中使用 for 循环的问题

【英文标题】：problem using for loop inside Redux-Toolkit

【发布时间】：2022-01-07 09:11:22

【问题描述】：

大家好，我在管理服务器回调中的数据时遇到问题，这是我第一次使用 Redux-ToolKit，所以这里是代码

  builder.addCase(FetchAllExpenses.pending , (state , action)=>
                state.situition = 'loading';
                // console.log(state.situition);
            ).addCase(FetchAllExpenses.fulfilled , (state , action)=>

                   const DataArray = [] ;              
                  expensesState = action.payload ;
                  for(let key in state.expensesState)
                    DataArray.push(new Expenses(key , state.expensesState[key].date , state.expensesState[key].source , state.expensesState[key].money , state.expensesState[key].Description , state.expensesState[key].month , state.expensesState[key].year))
                    ;
                    state.expensesState = DataArray ;
 
                    console.log(state.expensesState , 'after filitering');
                  state.reload = true ;
                  state.errorHappen = 'no error';
                  state.situition = `done`;

            )

结果

数组 [ 花费 “描述”：“巴哈克什”， "日期": "2021 年 11 月 30 日星期二 18:58:17 GMT+0800 (CST)", "id": "-MplYx54OqGKcLjbX74g", “钱”：“45484648”， “月”：10， “来源”：“医学”， “年”：2021年， , 花费 “描述”：“Vahac”， "日期": "2021 年 11 月 30 日星期二 18:58:25 GMT+0800 (CST)", "id": "-MplYz1NKqBZY1dp3Kgk", “钱”：“645495”， “月”：10， “来源”：“运输”， “年”：2021年， , ] 过滤后

SerializableStateInvariantMiddleware 耗时 108ms，超过了 32ms 的警告阈值。 如果您的状态或操作非常大，您可能需要禁用中间件，因为它可能会导致开发模式过慢。有关说明，请参阅https://redux-toolkit.js.org/api/getDefaultMiddleware。 它在生产版本中被禁用，因此您无需担心。 在warnIfExceeded中的node_modules/@reduxjs/toolkit/dist/redux-toolkit.cjs.development.js:217:16 在 node_modules/@reduxjs/toolkit/dist/redux-toolkit.cjs.development.js:456:12 中 在 node_modules/@reduxjs/toolkit/dist/redux-toolkit.cjs.development.js:374:39 中 在 __generator$argument_1 中的 node_modules/@reduxjs/toolkit/dist/redux-toolkit.cjs.development.js:1204:44 在 node_modules/@reduxjs/toolkit/dist/redux-toolkit.cjs.development.js:38:17 一步 在 node_modules/@reduxjs/toolkit/dist/redux-toolkit.cjs.development.js:19:56 中 在 node_modules/@reduxjs/toolkit/dist/redux-toolkit.cjs.development.js:97:21 完成

谢谢大家............

【参考方案1】：

Redux 的核心使用原则之一是you should not put non-serializable values in state or actions.

避免将不可序列化的值（如 Promises、Symbols、Maps/Sets、函数或类实例）放入 Redux 存储状态或调度的操作。这确保了通过 Redux DevTools 进行调试等功能将按预期工作。它还确保 UI 将按预期更新。

如果你坚持使用，请看Working with Non-Serializable Data

但在您的情况下，我没有看到需要使用不可序列化数据（new Expenses()）。只需使用 javascript 普通对象就足够了。

【讨论】：

感谢您的帮助