Ngrx createReducer 从早期版本迁移答案

【问题标题】：Ngrx createReducer migrating from earlier versionNgrx createReducer 从早期版本迁移
【发布时间】：2021-06-06 02:17:05
【问题描述】：

我在迁移 reducer 代码以使用 createReducer() 时遇到困难，特别是在默认情况下。

export function reducer(
    state: { [key: string]: any },
    action: FormActions
): { [key: string]: any } {
    const newState = _.cloneDeep(state);

    switch (action.type) {
        case FormActionTypes.UpdateValue: {
            return fieldUpdateReducer(newState, action as UpdateValue);
        }

        case RESET_WIZARD:
        case WizardActionTypes.ResetWizard: {
            return {};
        }

        default: {
            return fromForm.reducer(state, action as FormActions);
        }
    }
}

我尝试如下更改它，但默认情况的单元测试失败。我在这里尝试在默认选项的情况下调用其他减速器。

export const createClusterFormReducer = createReducer(
    (state, action) => fromForm.reducer(state, action),
    on(updateValue, (state: { [key: string]: any }, action: Action) => {
        const newState = _.cloneDeep(state);
        return fieldUpdateReducer(newState, action);
    }),
    on(resetWizard, (state, action) => {
        return {};
    }),
    on(wizardActionsResetWizard, (state, action) => {
        return {};
    })
);
export function reducer(
    state: { [key: string]: any },
    action: Action
): { [key: string]: any } {
    return createClusterFormReducer(state, action);
}

【问题讨论】：

标签： javascript angular typescript redux ngrx

【解决方案1】：

createReducer 没有默认情况，但有一些选项可以支持这一点。

你可以创建一个higher order reducer。

或者使用扩展运算符添加其他on 方法。

export const createClusterFormReducer = createReducer( (state, action) => fromForm.reducer(state, action), on(updateValue, (state: { [key: string]: any }, action: Action) => { const newState = _.cloneDeep(state); 返回 fieldUpdateReducer(newState, action); }), on(resetWizard, (状态, 动作) => { 返回 {}; }), ...其他方法 );

也许最简单的方法是创建一个 meta reducer。

export function reducer(
    state: { [key: string]: any },
    action: Action
): { [key: string]: any } {
    const newState = createClusterFormReducer(state, action);
    if(newState === state) {
       return otherReducer(state,action)
    }
    return newState;
}

【讨论】：