每当我启动 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