ngrx存储Combine Reducer抛出错误为`错误TS2322:类型'ActionReducer <{},Action>'是不可分配的`

时间:2019-04-09 05:40:22

标签: angular angular7 ngrx-store

我正在使用ngrx,并尝试合并2个reducer。出现错误

ERROR in src/app/state/index.ts(17,7): error TS2322: Type 'ActionReducer<{}, Action>' is not assignable to type 'ActionReducer<AppState, Action>'.
  Type '{}' is missing the following properties from type 'AppState': count, title

无法理解。该如何解决?

这是我的代码:出现错误的地方。

import { combineReducers, ActionReducer } from '@ngrx/store';
import { compose } from '@ngrx/core/compose';
import { storeFreeze } from 'ngrx-store-freeze';


import { reducerCount } from "./reducerCount";
import { reducerTitle } from "./reducerTitle";
import { AppState } from "./../models/State";

const reducers = {
    redCount : reducerCount,
    redTitle : reducerTitle
}


const developmentReducer: ActionReducer<AppState> = compose(storeFreeze, combineReducers)(reducers); //throws error here

export function reducer(state: any, action: any) {
  return developmentReducer(state, action);
}

这是我的AppState:

import { TitleState } from "./TitleState";//has model
import { CounterState } from "./CouterState";//has model

export interface AppState {
    count : CounterState;
    title : TitleState;
}

TitleState.ts
    export interface CounterState {
        counter:number
    }
CouterState.ts    
    export interface TitleState {
        title:string;
    }

这是我的减速器:

    export function reducerCount(state=0, action) {
        switch (action.type) {
            case "INCREMENT":
                return state + 1;

            case "DECREMENT":
                return state - 1;

            default:
                return state;
        }
    }


const basicValues = {
    title:"ABC"
}

export function reducerTitle(state=basicValues, action) {
    switch (action.type) {
        case "UPDATE_TITLE":
            return {
                ...state,
                title:"TCH"
            }

        default:
            return state;
    }
}

Live Demo here =>请检查状态-> index.ts

1 个答案:

答案 0 :(得分:1)

AppState的身材并不符合您在combineReducers()中提供的国家和平。替换:

export interface AppState {
    counter : CounterState;
    title : TitleState;
}

进入:

export interface AppState {
    countReducer : CounterState;
    titleReducer : TitleState;
}

请注意-设置combineReducers()StoreModule.forRoot()时,隐含地使用了NGRX中的StoreModule.forFeature()