Ngrx 存储：更新 ActionReducerMap 之外的公共状态答案

【问题标题】：Ngrx store: updating common state outside of the ActionReducerMapNgrx 存储：更新 ActionReducerMap 之外的公共状态
【发布时间】：2020-05-27 23:38:59
【问题描述】：

我有一个初始状态类似于的 ngrx 商店：

const state = { 
    child1: {...},
    child2: {...},
}

使用 ActionReducerMap 如下：

const reducerMap = {
    child1: reducer1,
    child2: reducer2,
}

现在我想在与 child1 和 child2 相同的级别添加一个“正在加载”状态，以跟踪两个孩子（它们是相互连接的）的加载。为此，我将初始状态更新如下：

const state = { 
    child1: {...},
    child2: {...},
    loading: false,
}

我尝试使用位于 reducer1 和 reducer2 顶部的 metareducer，如下所示：

export function metaReducer(reducer) {
    return function reduce(state, action) {
        switch(action.type) {
            case CommonActionTypes.UpdateLoading: {
                return {
                    ...,
                    loading: action.loading
                }
            }
            default:
                return reducer(state, action);
        }
    }
}

我将其添加到功能存储中，如下所示：

StoreModule.forFeature('myStore', compose(metaReducer, combineReducers)(reducerMap))

在应用程序中，我在更新 child1 和 child2 的某些效果期间调用 UpdateLoading 操作。但是，这并没有像我预期的那样工作。

首先，初始状态根本不支持“正在加载”变量 - 它仍然认为原始状态是

{ 
    child1: {...},
    child2: {...},
}

状态中的“正在加载”变量仅在调用 UpdateLoading 操作时更新。通过所有后续操作，它将从状态中删除。这很奇怪，因为唯一作用于它的 reducer 是 meta-reducer，而 reducer1 和 reducer2 分别作用于子状态 child1 和 child2。

使用 meta-reducer 更新公共状态是否正确？我怎样才能做到这一点？

【问题讨论】：

IMO，meta-reducer 用于在调用 reducer 之后/之前添加/检查行为。例如检查不变性。如果您希望切片在多个状态更改中保持（或不被删除），我认为您必须为它创建一个单独的减速器：StoreModule.forRoot({ loading: loadingReducer })

标签： angular ngrx ngrx-store ngrx-effects

【解决方案1】：

尝试在这两种情况下使用reducer函数：

export function metaReducer(reducer) {
    return function reduce(state, action) {
        switch(action.type) {
            case CommonActionTypes.UpdateLoading: {
                return reducer({ // <- wrap it.
                    ...state,
                    loading: action.loading
                }, action);
            }
            default:
                return reducer(state, action);
        }
    }
}

在.forRoot 中是这样的：

StoreModule.forRoot({/*...*/}, {
  metaReducers: [metaReducer],
}),

【讨论】：