problem using for loop inside Redux-Toolkit-CodePudding

hello every one i have problem to mange my data from server callback, and it's my first time using Redux-ToolKit so here;s the code

  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`;

            })

and the result

Array [ Expenses { "Description": "Bahacssh", "date": "Tue Nov 30 2021 18:58:17 GMT 0800 (CST)", "id": "-MplYx54OqGKcLjbX74g", "money": "45484648", "month": 10, "source": "Medical", "year": 2021, }, Expenses { "Description": "Vahac", "date": "Tue Nov 30 2021 18:58:25 GMT 0800 (CST)", "id": "-MplYz1NKqBZY1dp3Kgk", "money": "645495", "month": 10, "source": "Transport", "year": 2021, }, ] after filitering

SerializableStateInvariantMiddleware took 108ms, which is more than the warning threshold of 32ms. If your state or actions are very large, you may want to disable the middleware as it might cause too much of a slowdown in development mode. See https://redux-toolkit.js.org/api/getDefaultMiddleware for instructions. It is disabled in production builds, so you don't need to worry about that. at node_modules/@reduxjs/toolkit/dist/redux-toolkit.cjs.development.js:217:16 in warnIfExceeded at node_modules/@reduxjs/toolkit/dist/redux-toolkit.cjs.development.js:456:12 in at node_modules/@reduxjs/toolkit/dist/redux-toolkit.cjs.development.js:374:39 in at node_modules/@reduxjs/toolkit/dist/redux-toolkit.cjs.development.js:1204:44 in __generator$argument_1 at node_modules/@reduxjs/toolkit/dist/redux-toolkit.cjs.development.js:38:17 in step at node_modules/@reduxjs/toolkit/dist/redux-toolkit.cjs.development.js:19:56 in at node_modules/@reduxjs/toolkit/dist/redux-toolkit.cjs.development.js:97:21 in fulfilled

thank for you all ..........

CodePudding user response：

One of the core usage principles for Redux is that 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.

If you insist to use it, see Working with Non-Serializable Data

But in your case, I didn't see the need to use Non-Serializable Data(the new Expenses()). Just using JavaScript plain object is enough.