Question

我正在尝试使用React和Redux来设置TypeScript存储，但是这给我一个错误，我的auth减速器是undefined。

这是我的 store.ts ：

import {Action, applyMiddleware, combineReducers, compose, createStore} from 'redux';
import { auth, IAuthState } from './Auth/reducer';
import { general, IGeneralState } from './General/reducer';

export interface IAppState {
    auth: IAuthState;
    general: IGeneralState;
}

export const rootReducer = () => combineReducers({
        auth: auth,
        general: general,
});

const store = createStore<IAppState, Action<any>, {}, {}>(
    rootReducer(),
    (window as any).__REDUX_DEVTOOLS_EXTENSION__ &&
    (window as any).__REDUX_DEVTOOLS_EXTENSION__()
);

export { store };

这是我的 auth reducer ：

import { User } from '../../interfaces/user.interface';
import { AuthActionTypes } from './actions';

export interface IAuthState {
    user: User;
    authenticated: boolean;
}

const initialState: IAuthState = {
    user: null,
    authenticated: true,
};

export const auth = (state: IAuthState = initialState, action: any): IAuthState => {
    switch (action.type) {
        case AuthActionTypes.Setuser:
            const { User } = action.payload;

            return {
                ...state,
                user: User
            };

        case AuthActionTypes.Logout:

            return {
                ...state,
                user: null,
                authenticated: false,
            };
    }
};

它给了我错误：

未捕获的错误：Reducer“ auth”在以下期间未定义初始化。如果传递给减速器的状态未定义，则您必须显式返回初始状态。初始状态可能不是未定义。如果您不想为此减速器设置值，则可以使用null而不是undefined。

Answer 1

您只需要做的就是总是从化简器返回一个值，即使它是null。

以下修复程序将完成这项工作：

export const auth = (state: IAuthState = initialState, action: any): IAuthState => {
    switch (action.type) {
        case AuthActionTypes.Setuser:
            const { User } = action.payload;

            return {
                ...state,
                user: User
            };

        case AuthActionTypes.Logout:

            return {
                ...state,
                user: null,
                authenticated: false,
            };
    }

    // this step was missing
    return state;
};

您需要遵循的规则很少：

即使您未进行任何更改，即使值仅为null，也始终需要返回状态。
您不应该返回undefined。
如果状态已更改，则需要将其替换，例如：{...state, newValue: false}。

摘自文档：

在默认情况下，我们返回以前的状态。对于任何未知操作，返回以前的状态很重要。

进一步阅读：Handling Actions

我希望这会有所帮助！

Answer 2

Reducer是一个简单的函数，无论状态是否更改，它都会返回状态。您缺少减速器中的默认情况，因此只需将其替换为以下内容：

export const auth = (state: IAuthState = initialState, action: any): IAuthState => {
    switch (action.type) {
        case AuthActionTypes.Setuser:
            const { User } = action.payload;

            return {
                ...state,
                user: User
            };

        case AuthActionTypes.Logout:

            return {
                ...state,
                user: null,
                authenticated: false,
            };

         default:                // this are 2 lines ive added
            return state
    }
};

希望有帮助。毫无疑问

为什么我的减速器返回未定义的React TypeScript

2 个答案: