angular - ngrx reducer 在发送 Action 后不触发

Question

我发现当我向我的商店发送一个 Action 时我的 reducer 函数没有触发

我有一个功能模块，其中的操作运行良好

我遇到的问题是布局状态，这是我向根状态注册的唯一状态。

这就是我初始化应用程序的方式:

//Root
import * as fromLayout from '../core/store/reducers/layout.reducer';
import * as layoutActions from '../core/store/actions/layout.actions';
import { ActionReducerMap, createSelector } from '@ngrx/store';
import { ActionReducer } from 'ngx-bootstrap/mini-ngrx';
//Interface to hold all states, top level state interface is just a map of keys to inner state types.
export interface Root {
  readonly layout: fromLayout.State
}
export type RootActions =  layoutActions.Actions;

//Get reducers
export const initialState = {
  layout: fromLayout.reducer(undefined, {} as layoutActions.Actions)
}

export interface State {
    root: Root;
  }
//Make sure below is not a function expression
  export function rootReducer(state: Root = initialState, action: RootActions){
    return {
        layout: fromLayout.reducer(state.layout, {} as layoutActions.Actions)
    };
  };

  export const reducers: ActionReducerMap<State> = {
    root: rootReducer
  };

在 app.module.ts 中

  import { reducers } from './reducers/';//This points to -> const reducers: ActionReducer

 StoreModule.forRoot(reducers),
    StoreDevtoolsModule.instrument({maxAge: 25}),
    EffectsModule.forRoot([])

我的layout.actions.ts

import { Action } from '@ngrx/store';

export const OPEN_SIDENAV = '[Layout] Open Sidenav';
export const CLOSE_SIDENAV = '[Layout] Close Sidenav';
export const CURRENT_BLOG_ID = '[Layout] Current Blog ID';
export class OpenSidenav implements Action {
  readonly type = OPEN_SIDENAV;
}

export class CloseSidenav implements Action {
  readonly type = CLOSE_SIDENAV;
}

export class CurrentBlogID implements Action {
  readonly type = CURRENT_BLOG_ID;
  constructor(public payload:string){
    console.log(this.payload)
  }
}

export type Actions = OpenSidenav | CloseSidenav | CurrentBlogID;

layout.reducers.ts

import * as layout from '../actions/layout.actions';

export interface State {
  showSidenav: boolean;
  currentBlogID:string
}

const initialState: State = {
  showSidenav: false,
  currentBlogID:''
};

export function reducer(state = initialState, action: layout.Actions): State {
  switch (action.type) {
    case layout.CLOSE_SIDENAV:
      return {
        ...state,
        showSidenav: false,
      };

    case layout.OPEN_SIDENAV:
      return {
        ...state,
        showSidenav: true,
      };
      case layout.CURRENT_BLOG_ID:
      console.log(action.payload)
      return handleCurrentBlogID(state, action)
    default:
      return state;
  }
}

function handleCurrentBlogID(state, action){
  console.log(action.payload)
  let newState = {
    ...state,
    currentBlogID: action.payload,
  }
  return newState
}
export const getShowSidenav = (state: State) => state.showSidenav;

我如何发货到商店:

import { State } from '../../reducers';//This is root state
export class HomeComponent {
  constructor(private store: Store<State>) {}

  onBlogSelected(id){

    this.store.dispatch(new CurrentBlogID(id))
  }
}

Answer 1

在 rootReducer 中，您正在调用布局缩减器并传递其返回值而不是函数本身。应该像下面这样

return {
    layout: fromLayout.reducer
};