时间戳

首页 > 解决方案 > 返回存储数据时出现 TypeError

javascript - 返回存储数据时出现 TypeError

问题描述

我正在尝试将数据从我的表单组件存储到我的商店。但是当我尝试调度动作并将动作有效负载返回到状态时，得到一个错误，即，

TypeError: state.users is undefined

那个动作减速器是

export const addUserReducer = (state = { users: [] }, action) => {
  switch (action.type) {
    case "ADD_USER_REQUEST":
      return {
        loading: true,
      };
    case "ADD_USER_SUCCESS":
      return {
        ...state,

        users: [...state.users, action.payload],
      };
    default:
      return state;
  }
};

该应用程序的 Redux 商店是，

import { combineReducers, createStore, applyMiddleware } from "redux";
import { addUserReducer } from "./Reducers/addUserReducer";
import { composeWithDevTools } from "redux-devtools-extension";
import thunk from "redux-thunk";
const finalReducer = combineReducers({
  addUserReducer: addUserReducer,
});
const composeEnhancers = composeWithDevTools({
  // Specify here name, actionsBlacklist, actionsCreators and other options
});

const usersFromStorage = localStorage.getItem("Users")
  ? JSON.parse(localStorage.getItem("Users"))
  : [];
console.log(usersFromStorage);
const initialState = {
  addUserReducer: {
    users: usersFromStorage,
  },
};

const store = createStore(
  finalReducer,
  initialState,
  composeEnhancers(applyMiddleware(thunk))
);

export default store;

我试图通过使用多种方法来解决这个问题，但还不知道主要问题在哪里。

标签： javascriptreactjsreduxreact-reduxreact-redux-form

解决方案

在您的开关的第一种情况下，您还应该返回状态的另一部分：

case "ADD_USER_REQUEST":
      return {
        ...state,
        loading: true,
      };

推荐阅读