-1

使用 Redux 如何阻止 reducer 中的 switch 增长？

我正在使用 Angular 5 和 ng2-Redux。

我正在使用减速器和开关，但我担心开关会随着我添加更多动作类型而增长。

目前我正在尝试使用红色组合减速器来管理状态和文件的增长：

我目前收到此错误：

未处理的 Promise 拒绝：Reducer “app” 在初始化期间返回未定义。如果传递给 reducer 的状态未定义，则必须显式返回初始状态。初始状态可能不是未定义的。如果你不想为这个 reducer 设置值，你可以使用 null 而不是 undefined。; 区域：; 任务：Promise.then；值：错误：Reducer“app”在初始化期间返回未定义。如果传递给 reducer 的状态未定义，则必须显式返回初始状态。初始状态可能不是未定义的。如果你不想为这个 reducer 设置值，你可以使用 null 而不是 undefined。

似乎 rootReducer 需要返回状态，但我使用的是组合减速器。

我的减速机服务代码：

import { combineReducers } from 'redux';

export interface IAppState {
    counter?: number;
    user?: Object;
    numberOfMessages?: number;
}

export interface IAction {
    type: string;
    payload?: any;
}

export const INITIAL_APP_STATE: IAppState = {
    counter: 0,
    user: {},
    numberOfMessages: 0
};

export const appReducer = (state: IAppState, action: IAction): IAppState => {
    switch (action.type) {
        case 'INCREMENT':
        return  {
            counter: state.counter + action.payload,
            numberOfMessages: state.numberOfMessages
        };
    }
    return state;
};

export const userReducer = (state: IAppState, action: IAction): IAppState => {
    switch (action.type) {
        case 'DECREMENT':
        return  {
            counter: state.counter,
            numberOfMessages: state.numberOfMessages - action.payload
        };
    }
    return state;
};

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

这是我用于 redux 设置的模块导出部分（我认为这里有错误？？？？）：

export class AppModule {
  constructor(ngRedux: NgRedux<IAppState>) {
    ngRedux.configureStore(rootReducer, INITIAL_APP_STATE);
  }
}

这是我的调度方法：

 public increment(): void {
    this.ngRedux.dispatch({
      type: '[app] INCREMENT',
      payload: 1
    });
  }

 public decrement(): void {
    this.ngRedux.dispatch({
      type: '[user] DECREMENT',
      payload: 2
    });
  }
4

1 回答 1

2

你应该把你IAppState分成不同的特征状态：

export interface IAppState = {
  auth: IAuthState;
  onboarding: IOnboardingState;
  feedback: IFeedbackState;
};

然后，您使用from构建您rootReducer的所有功能缩减器：combineReducers'redux'

export const rootReducer = combineReducers({
  auth: authReducer,
  onboarding: onboardingReducer,
  feedback: feedbackReducer
});

因此，您的功能状态、操作、reducer 和史诗将更小且更易于维护。

您可以将特定于功能的前缀添加到您的操作名称以确保它们是唯一的：

export class CounterActions {
  static INCREMENT: string = '[COUNTER] INCREMENT';
  static DECREMENT: string = '[COUNTER] DECREMENT';
  static RANDOMIZE: string = '[COUNTER] RANDOMIZE';

更新：您的后续问题

解决方法在报错信息中，仔细阅读：

如果传递给 reducer 的状态未定义，则必须显式返回初始状态。

您需要传入初始状态作为默认值：

export const userReducer = (state: IUserState = INITIAL_USER_STATE, action: IAction): IAppState => {
                                   ^^^^^^^^^^^   ^^^^^^^^^^^^^^^^^
    switch (action.type) {
        case 'LOGIN':
        return  {
            userName: action.payload.userName
        };
    }
    return state;
};

此外，userReduceronly 获取IUserState传入的状态切片。

于 2018-02-25T22:00:40.627 回答