Question

我目前正在考虑使用ngrx商店（v.4.0.3）进行状态管理。这似乎是一个伟大的项目。

在尝试初始化我的商店状态时，我在路上遇到了一些冲击。 documentation使它看起来很简单，但我无法看到我出错的地方。

以下是相关的代码段：

在app.state.ts

export interface AppState {
    searchText: string;
}

在search-text.reducer.ts

中

export const UPDATE = 'UPDATE';

export class UpdateSearchTextAction implements Action {
    readonly type: string = UPDATE;
    constructor(public readonly text: string) {}
}

export function searchTextReducer(state: string, action: UpdateSearchTextAction) {
    switch(action.type) {
      case UPDATE:
        return action.text;
    }
};

在app.module.ts

export const reducers: ActionReducerMap<AppState, UpdateSearchTextAction> = {
    searchText: searchTextReducer
};

export const initialState: InitialState<AppState> = {
    searchText: 'sds'
};

....

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

在某个组件中

constructor(private store: Store<AppState>) {
    this.searchBoxText = store.select('searchText');
    this.searchBoxText.subscribe(text => console.log('value = [' + text + "]"));
}

因此，当应用程序加载时，我希望看到以下内容登录到控制台：

value = [sds]

但是我看到了

value = [undefined]

稍后，一旦我开始输入触发UpdateSearchTextAction的输入，控制台确实会记录正确的值。所以我似乎正确地设置了商店。

我可能缺少一些非常简单的东西。有人可以提供一些建议吗？

Answer 1

由于您将其设为readonly，因此您无权分配值

export class UpdateSearchTextAction implements Action {
    readonly type: string = UPDATE;
    constructor(public text: string) {}
}

您需要使用dispatch语句

调度该值

this.store.dispatch(new UpdateSearchTextAction.UPDATE(<<string>>));

Answer 2

您必须为state参数指定默认值，如果没有匹配，则返回相同的状态。尝试将您的减速器更改为以下内容：

export function searchTextReducer(state: string = '', action: UpdateSearchTextAction) {
    switch(action.type) {
      case UPDATE:
        return action.text;
      default:
        return state;
    }
};

无法初始化ngrx（v.4.x）存储的状态

2 个答案: