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

Question

大家好，我在管理来自服务器回调的数据时遇到了问题，这是我第一次使用 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`;

            })

结果

数组[ 花费 { “描述”：“Bahacssh”， “日期”：“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 耗时 108 毫秒，超过 32 毫秒的警告阈值。如果您的状态或操作非常大，您可能希望禁用中间件，因为它可能会导致开发模式速度过慢。有关说明，请参阅 https://redux-toolkit.js.org/api/getDefaultMiddleware。它在生产版本中被禁用，因此您无需担心。在 node_modules/@reduxjs/toolkit/dist/redux-toolkit.cjs.development.js:217:16 在 warnIfExceeded 在 node_modules/@reduxjs/toolkit/dist/redux-toolkit.cjs.development.js:456:12 中在 node_modules/@reduxjs/toolkit/dist/redux-toolkit.cjs.development.js:374:39 中在 node_modules/@reduxjs/toolkit/dist/redux-toolkit.cjs.development.js:1204:44 在 __generator$argument_1 在 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 完成

谢谢大家.......

Answer 1

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

Avoid putting non-serializable values such as Promises, Symbols, Maps/Sets, functions, or class instances into the Redux store state or dispatched actions. This ensures that capabilities such as debugging via the Redux DevTools will work as expected. It also ensures that the UI will update as expected.

如果你非要用的话，看Working with Non-Serializable Data

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

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

problem using for loop inside Redux-Toolkit

reactjs

react-native

react-redux

redux-toolkit