开发者问题收集

每当我启动 React 应用程序时获取的操作都是未定义的

2021-06-14
708

我不明白我面临的错误。 每当我启动 React 服务器时,我的应用程序就会崩溃,甚至不会分派 Redux 操作 我尝试在控制台中记录操作对象,但它未定义,而且我编写的所有操作都是正确的。找不到问题

我的 Reducer 文件

import { UserActionTypes } from '../ActionTypes/UserActionTypes';
const INITIAL_STATE = {
  user: null,
  error: '',
};
interface StateType {
  user: UserType | null;
  error: string;
}
interface userSignInStartAction {
  type: UserActionTypes.USER_SIGN_IN_START;
  payload: {
    email: string;
    password: string;
  };
}
interface userSignInFailAction {
  type: UserActionTypes.USER_SIGN_IN_FAIL;
  payload: string;
}
interface userSignInSuccessAction {
  type: UserActionTypes.USER_SIGN_IN_SUCCESS;
  payload: UserType;
}
type ActionType =
  | userSignInFailAction
  | userSignInSuccessAction
  | userSignInStartAction;
const reducer = (action: ActionType, state: StateType = INITIAL_STATE) => {
  switch (action.type) {
    case UserActionTypes.USER_SIGN_IN_SUCCESS:
      return {
        ...state,
        user: action.payload,
      };
    case UserActionTypes.USER_SIGN_IN_FAIL:
      return {
        ...state,
        error: action.payload,
      };
    default:
      return state;
  }
};

export default reducer;

store.ts

import { applyMiddleware, createStore, combineReducers } from 'redux';
import logger from 'redux-logger';
import userReducer from './reducers/userReducer';

const rootReducer = combineReducers({
  user: userReducer,
});

export const store = createStore(rootReducer, applyMiddleware(logger));

export type RootState = ReturnType<typeof rootReducer>;
export type AppDispatch = typeof store.dispatch;

actions.ts

import { UserType } from '../../graphql/types';
import { UserActionTypes } from '../ActionTypes/UserActionTypes';

export const userSignInSuccess = (user: UserType) => ({
  type: UserActionTypes.USER_SIGN_IN_SUCCESS,
  payload: user,
});
export const userSignInFail = (error: string) => ({
  type: UserActionTypes.USER_SIGN_IN_FAIL,
  payload: error,
});

错误

Uncaught TypeError: Cannot read property 'type' of undefined
    at reducer (userReducer.ts:32)
    at redux.js:436
    at Array.forEach (<anonymous>)
    at assertReducerShape (redux.js:434)
    at combineReducers (redux.js:499)
    at Module.<anonymous> (store.ts:5)
    at Module../src/redux/store.ts (store.ts:10)
    at __webpack_require__ (bootstrap:856)
    at fn (bootstrap:150)
    at Module.<anonymous> (index.css?bb0a:82)
    at Module../src/index.tsx (index.tsx:31)
    at __webpack_require__ (bootstrap:856)
    at fn (bootstrap:150)
    at Object.1 (reportWebVitals.ts:16)
    at __webpack_require__ (bootstrap:856)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1
2个回答

此答案不正确 - OP 的状态/动作颠倒了。我无法删除,所以请忽略。

对 Reducer 的初始调用不会有 action 的值,因此也不会有 action.type 的值。您有状态的默认值,但没有动作 - 您需要在调用 switch 之前检测此默认值。可能类似于:

switch (action && action.type) { //short-circuit if action not defined
    case UserActionTypes.USER_SIGN_IN_SUCCESS:
      return {
        ...state,
        user: action.payload,
      };
    case UserActionTypes.USER_SIGN_IN_FAIL:
      return {
        ...state,
        error: action.payload,
      };
    default:
      return state;
  }
LeadDreamer
2021-06-14

您的 Reducer 签名是错误的。

它应该是 (state, action),但您有 (action, state)。

将其更改为

(state: StateType = INITIAL_STATE, action: ActionType)

phry
2021-06-14