使用 ActionReducerMap 注册减速器时出错："not assignable to type 'ActionReducerMap<AppState, Action>"

Question

下面是我的 Angular 5 应用程序的简化版本。我有一个减速器，我想在我的根模块中注册。在 LINE A 中出现以下错误：

ERROR in src/app/store/app.reducers.ts(7,14): error TS2322: Type '{ post: (state: State, action: Action) => void; }' is not assignable to type 'ActionReducerMap<AppState, Action>'.
  Types of property 'post' are incompatible.
    Type '(state: State, action: Action) => void' is not assignable to type 'ActionReducer<State, Action>'.
      Type 'void' is not assignable to type 'State'.

app.module.ts : 根模块

  imports: [
    ...
    StoreModule.forRoot(reducers)
  ],

store/app.reducers.ts：在全球商店内

import {ActionReducerMap} from "@ngrx/store";
import * as fromPost from "../postDir/store/post.reducers";

export interface AppState {
  post:fromPost.State
}
export const reducers: ActionReducerMap<AppState> = { //=======LINE A ======
  post:fromPost.postReducer
};

postDir/store/post.reducers.ts：本地商店内

export interface State{
  query:string
  posts:Post[]
}

const initialPostState: State = {
  query:"initial",
  posts:[]
};

export function postReducer(state = initialPostState, action:postActions.PostActions){}

如果我将 LINE A 中的 <AppState> 替换为 <any>，代码工作正常还有其他人遇到过类似的问题吗？我尝试 google 但找不到任何重要的东西。

Answer 1

您的错误消息说属性 post 有错误的方法签名。它是 (state: State, action: Action) => void，但应该是 (state: State, action: Action) => State。

在 post.reducers.ts 中，您的减速器需要 return 像这样传递给它的状态：

export function postReducer(state = initialPostState, action:Action) { 
  return state;
};

return 类型是根据您的身份隐式推断出来的，或者在这种情况下不是，returning。

您可以使用 ...): State {... 显式声明 return 类型，但您仍应 return 状态。

Answer 2

我遇到了类似的情况，经过很多时间检查我的代码，我发现在 reducer 的 switch case 动作中缺少属性 return。确保使用扩展运算符 ...state 加载以前的状态，这样可以避免很多难以发现的问题。在我的例子中，我 return 编辑了所有属性，但没有首先加载以前的状态。遇到 TS2322 错误并花了数小时来修复和了解发生了什么。以您的代码为例：

export function postReducer(state = initialPostState, action:postActions.PostActions){

// here you must return the state after an action
   switch (action.type){
       case postActions.ACTION_EXAMPLE:
       return {
              ...state, someProperty: action.payload  // here you load your previous state and change just that one you want

      }
      case postActions.ACTION_02_EXAMPLE:
      return {
              ...state, someProperty: action.payload  // here you load your previous state and change just that one you want

      }
     default:
     return { ...state}
   } 
}

希望对您有所帮助！

Answer 3

回答是否有人偶然发现我犯的同样错误。当我想将状态重置为特定操作的初始状态时，我使用 @ngrx/entity 遇到了这个问题，我有：

on(actions.resetState, () => adapter.getInitialState())

当我应该包含额外的属性时

on(actions.resetState, () => adapter.getInitialState({ foo: 'bar' }))

Answer 4

请转到 tsconfig.json 并执行 strict : false

使用 ActionReducerMap 注册减速器时出错："not assignable to type 'ActionReducerMap<AppState, Action>"

Getting error while registering reducers using ActionReducerMap: "not assignable to type 'ActionReducerMap<AppState, Action>"

angular

typescript

ngrx

ngrx-store