@ngrx/store从v10更新到v11/v12

Question

您好。

以下问题我需要帮助。不久前，我们将项目更新为使用Angular 12，我一直在尝试将@ngrx/store从v10更新为v11(或v12(。当我们还在使用Angular 11时，我确实尝试过这个更新，但我一直收到这个错误：

Argument of type 'ReducerTypes<unknown, [ActionCreator<"EnableForm", () => TypedAction<"EnableForm">>]>' is not assignable to parameter of type 'ReducerTypes<AppState, ActionCreator<string, Creator<any[], object>>[]>'.
Types of property 'reducer' are incompatible.
Type 'OnReducer<unknown, [ActionCreator<"EnableForm", () => TypedAction<"EnableForm">>]>' is not assignable to type 'OnReducer<AppState, ActionCreator<string, Creator<any[], object>>[]>'.
Type 'unknown' is not assignable to type 'AppState'.

我的减速器看起来像这样：

import { Action, createReducer, on } from '@ngrx/store';
import * as MyAction from '../actions';
import { AppState } from '../state';
import { onEnableForm, onDisableForm } from './form.reducer';
const initialState: AppState = {
form: {
disabled: false,
...
},
...
};
export function storeReducer(state: AppState = initialState, action: Action): AppState {
return createReducer<AppState>(
state,
on(MyAction.InitializeState, MyAction.ResetState, () => initialState),
on(MyAction.DestroyState, () => undefined),
onEnableForm,
onDisableForm
)(state, action);
}

actions.ts看起来像这样：

import { createAction } from '@ngrx/store';
export const InitializeState = createAction('[MyFeatureStore] InitializeState');
export const ResetState = createAction('[MyFeatureStore] ResetState');
export const DestroyState = createAction('[MyFeatureStore] DestroyState');
export const EnableForm = createAction('[MyFeatureStore] EnableForm');
export const DisableForm = createAction('[MyFeatureStore] DisableForm');

form.reducer.ts看起来是这样的：

import { on } from '@ngrx/store';
import * as MyAction from '../actions';
import { AppState } from '../state';
export const onEnableForm = on(MyAction.EnableForm, (state: AppState) => {
return {
...state,
form: {
...state.form,
disabled: false
}
};
});
export const onDisableForm = on(MyAction.DisableForm, (state: AppState) => {
return {
...state,
form: {
...state.form,
disabled: true
}
};
});

这在v10中运行良好，但我不明白为什么它在v11中不起作用。

Answer 1

现在发生的事情是，angular和所有的typescript世界都在向越来越多的强类型规则移动，所以当你在管道外创建on函数时，typescript无法推断发生了什么。

您可以做的事情是扩展on函数的类型，如so

export const onEnableForm = on<AppState, any>(EnableForm, (state: AppState): AppState => {
return {
...state,
form: {
...state.form,
disabled: false,
}
};
});
export const onDisableForm = on<AppState, any>(
DisableForm,
(state: AppState): AppState => {
return {
...state,
form: {
...state.form,
disabled: true
}
};
}
);

您可以将其用作一种变通方法，直到找到合适的类型来使用any。这里是一个堆栈litz与所提出的解决方案。