Question

谁能告诉我为什么我的状态总是不确定的。我是NgRx的新手

reducers.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)

actions.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属于您的索引子状态。否则，您的减速器将被连接，并且永远不会设置初始状态。

NgRx状态始终未定义

1 个答案: