1

我正在尝试在 redux 中插入项目，但是当我单击按钮时出现以下错误：

TypeError: state.reduxCart is not iterable

我的减速器代码：

const INITIAL_STATE = {
    reduxCart: [],
    reduxCartCounter: 0
}


export default (state = INITIAL_STATE, action) => {
    switch (action.type) {

        case 'ADDITEM':
            return {
                ...state,
                reduxCart: [action.payload , ...state.reduxCart]  // ERROR
            }

        case 'ADDCOUNTER':
            return ({
                ...state,
                reduxCartCounter: action.payload
            })

        default:
            return state;
    }

}

这是我的商店代码：

import rootReducer from './reducer';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; 

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

const persistConfig = {
    key: 'root',
    storage,
}


const persistedReducer = persistReducer(persistConfig, rootReducer);
const store = createStore(persistedReducer, applyMiddleware(thunk));
const persistor = persistStore(store);
export { store, persistor };

我的行动代码：

export function AddToReduxCart(item) {
    return dispatch => {
        dispatch({ type: 'ADDITEM', payload: item  })
    }
}

如何解决这个问题？任何帮助，将不胜感激。

4

1 回答 1

0

在您的操作文件中，您可以在 addItem 函数中使用 getState 函数。然后在您的操作中连接两个数组并将它们作为有效负载分派。

应该是这样的：

import store from '../store';

export function addItem(nextItem) {
  const currentReduxCart = store.getState().reduxCart.map(item => ({...item}));
  const payload = [nextItem , ...currentReduxCart];
  return {
    type: 'ADDITEM',
    payload: payload,
  }
}

const INITIAL_STATE = {
    reduxCart: [],
    reduxCartCounter: 0
}


export default (state = INITIAL_STATE, action) => {
    switch (action.type) {

        case 'ADDITEM':
            return {
                ...state,
                reduxCart: action.payload
            }

        case 'ADDCOUNTER':
            return ({
                ...state,
                reduxCartCounter: action.payload
            })

        default:
            return state;
    }

}

如果您想添加您的操作代码，我将能够帮助您针对您的代码进行调整。

于 2020-11-27T16:58:18.587 回答