Question

嗨，我正在使用redux来持久保存我的应用程序并为其补充水分。这是我的产品减速器：

const initialState = {
  products: [],
  id: [],
  qty: [],
  numOfItems: 0,
  totalPrice: 0,
  status: '',
  showPopup: false
};

const productsReducer = (state = initialState, action) => {
  let updatedId = [...state.id];
  let updatedQty = [...state.qty];
  let index = updatedId.indexOf(action.id);

  switch (action.type) {
    case actionTypes.FETCH_PRODUCTS_REQUEST:
      return {
        ...state,
        status: action.status
      }

    case actionTypes.FETCH_PRODUCTS_SUCCESS:
      return {
        ...state,
        status: action.status,
        products: action.products
      }

    case actionTypes.TOGGLE_POPUP:
      return {
        ...state,
        showPopup: !state.showPopup
      }
    };
    .....
}

出于我未知的原因，我的persist / REHYDRATE操作显示了productReducer的一个键{showPopup：true}。

action     
{type: "persist/REHYDRATE", payload: {…}, err: undefined, key: "root", asyncDispatch: ƒ}
  asyncDispatch: ƒ asyncDispatch(asyncAction)
  err: undefined
  key: "root"
  payload:
  productsReducer: {showPopup: true}
  userReducer: ...
  _persist: {version: -1, rehydrated: true}
  __proto__: Object
  type: "persist/REHYDRATE"

在那次FETCH_PRODUCTS_REQUEST之后，也显示productsReducer：{showPopup：true}。这表明补液在开始时就取代了productReducer状态。

action FETCH_PRODUCTS_REQUEST
  prev state 
    {productsReducer: {…}, userReducer: {…}, _persist: {…}}
    productsReducer: {showPopup: true}

当所获取的产品调用productReducer时，它尝试执行let updatedId = [...state.id]。但这不起作用，因为productReducer仅具有状态showPopup。那是当它抛出以下错误时...

TypeError：散布不可迭代实例的尝试无效。

我怀疑问题出在持久/重新生成。我该如何重置应用程序或重置补水？

React Redux TypeError：散布不可迭代实例的无效尝试

0 个答案: