NgRx 狀態始終未定義

Question

誰能告訴我為什么我的狀態總是未定義。 我是 NgRx 的新手

減速器.ts

import * as actions from "./actions"
import * as _ from "lodash"

export interface State {
  cards: any[]
}

export const initialState: State = {
  cards : []
}

export function reducer(state = initialState, action: actions.Actions): State {
  switch(action.type) {
    case actions.ActionTypes.GET_CARDS: {
      let cardList: any[] = []
      for(let i = 0; i < 4; i++)
        cardList.push(cards[_.random(0,3)])
      return Object.assign({}, state, { cards: cardList })
    }
    case actions.ActionTypes.ADD_CARD: {
      return Object.assign({}, state, {
        cards: _.concat(state.cards,cards[_.random(0,3)])
      })
    }
    case actions.ActionTypes.REMOVE_CARD: {
      return Object.assign({}, state, { cards:_.slice(state.cards,1) })
    }
    default: {
      return state
    }
  }
}

export const cards: any[] = [
  { name: 'clubs', symbol: '♣', id: Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5) },
  { name: 'diamonds', symbol: '♦', id: Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5) },
  { name: 'spades', symbol: '♠', id: Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5) },
  { name: 'hearts', symbol: '❤︎', id: Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5) }
]

export const getCards = (state: State) => state.cards

index_reducer.ts

import { createSelector } from "reselect"
import { ActionReducer } from "@ngrx/store"
import { compose } from "@ngrx/core/compose"
import { combineReducers } from "@ngrx/store"
import * as fromReducer from "./reducer"

export interface State {
  index: fromReducer.State
}

export const reducers = {
  index: fromReducer.reducer
}

const productionReducer: ActionReducer<State> = combineReducers(reducers)

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

export const getReducerState = (state: State) => state.index

export const getReducerCards = createSelector(getReducerState, fromReducer.getCards)

動作.ts

import { Action } from "@ngrx/store"
import { type } from "./util"

export const ActionTypes = {
  GET_CARDS:                type("[Cards] Get Cards"),
  GET_CARDS_SUCCESS:        type("[Cards] Get Cards Success"),
  ADD_CARD:                 type("[Cards] Logout"),
  REMOVE_CARD:              type("[Cards] Logout Success"),
}

export class GetCards implements Action {
  type = ActionTypes.GET_CARDS
  constructor( ) { }
}

export class GetCardsSuccess implements Action {
  type = ActionTypes.GET_CARDS_SUCCESS
  constructor( ) { }
}

export class AddCard implements Action {
  type = ActionTypes.ADD_CARD
  constructor( ) { }
}

export class RemoveCard implements Action {
  type = ActionTypes.REMOVE_CARD
  constructor( ) { }
}

export type Actions = GetCards | GetCardsSuccess | AddCard | RemoveCard

我的主要組件就像這樣初始化

    constructor( private store: Store<fromRoot.State>  ) { 
      this.store.dispatch(new actions.GetCards())
      this.cards = this.store.select(fromRoot.getReducerCards)              
    }      

Answer 1

如果您的狀態未定義，則意味着您尚未使用initialState對其進行初始化。 你在你的模塊導入中這樣做：

StoreModule.forFeature('index', fromReducer, { initialState })

其中fromReducer和initialState屬於您的索引子狀態。 否則你的減速器永遠不會被附加並且你的初始狀態永遠不會被設置。