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

【问题标题】：Why is my reducer returning undefined, React TypeScript为什么我的减速器返回未定义的 React TypeScript
【发布时间】：2020-04-08 02:39:15
【问题描述】：

我正在尝试使用 React 和 TypeScript 设置我的 Redux 存储，但它给了我一个错误，我的 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" 在期间返回未定义初始化。如果传递给减速器的状态是未定义的，你必须显式返回初始状态。初始状态可能不是不明确的。如果你不想为这个 reducer 设置一个值，你可以使用 null 而不是 undefined。

【问题讨论】：

标签： reactjs typescript redux

【解决方案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

我希望这会有所帮助！

【讨论】：

【解决方案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
    }
};

希望对您有所帮助。如有疑问，请随意

【讨论】：

【解决方案3】：

尝试使用

default: 
return {...state}

【讨论】：