无法从商店 ngrx 获取值
Can't get values from the store ngrx
我面对的是 NgRx,我无法理解向商店添加值并检索它怎么会这么难。无论如何,这就是我到目前为止所做的
效果:
export class idEffects {
saveId$ = createEffect(() =>
this.actions$
.pipe(
ofType(idActions.addIdAction),
tap(payload => {
console.log("action",payload);
})
)
,{dispatch: false});
constructor(
private actions$: Actions
) {}
}
操作次数:
export const ADD_ID = '[Id Action] 添加 id';
export const addIdAction = createAction(
ADD_ID,
props<{id: any}>()
)
减速器 ts:
export interface IdState {
id: any;
}
export const defaultId: IdState = {
id: undefined
};
export const idReducer = createReducer (
defaultId,
on(idActions.addIdAction, (state, action) => {
//console.log("Calling id reducer", action);
return {
id: action
}
})
)
和选择器 ts:
export const selectIdState =
createFeatureSelector<IdState>("id")
export const selectIdValue = createSelector(
selectIdState,
id => id
);
现在,这就是我 app.module.ts
中的内容
StoreModule.forRoot({id: idReducer}),
EffectsModule.forRoot([IdEffects]),
StoreModule.forRoot(reducers, {
metaReducers
}),
StoreDevtoolsModule.instrument({maxAge: 25}),
StoreRouterConnectingModule.forRoot({
stateKey: 'router',
routerState: RouterState.Minimal
})
似乎存储数据运行良好,因为我的控制台中的 Redux 面板 return 这个:
id(pin):"1"
data(pin):"Hello There"
type(pin):"[Id Action] add id"
但是,当我尝试检索这个对象时,我得到一个 undefined
并且我是这样做的:
this.id$ = storeId.pipe(select(selectIdValue))
并在 html
<h4>The id obj is: {{id$ | async}}</h4>
但它什么也没写。我尝试在组件中使用订阅来获取结果,它让我明白了 undefined
怎么可能?
状态是
export interface IdState {
id: any;
}
因此select或者应该select从它的特征状态中识别
export const selectIdValue = createSelector(
selectIdState,
state => state.id, // selectIdState returns an object of IdState interface.
);
然后,reducer,它应该将 id
prop 添加到状态,而不是 action
on(idActions.addIdAction, (state, action) => {
//console.log("Calling id reducer", action);
return {
...state, // not needed in your case, but a good style.
id: action.id, // <- .id
}
}),
效果,不需要,可以去掉。
最后一点是 reducers
变量。你能分享它的来源吗?
应该是
const reducers = {
id: idReducer, // id key is important, idReducer is enough for now.
};
别忘了派遣到某个地方addIdAction
。
例如在组件的 ngOnInit
中。
this.store.dispatch(addIdAction({id: 'value'}));
如果您有类似的东西 - 它应该可以工作。
如果您有更多问题,请告诉我。
我面对的是 NgRx,我无法理解向商店添加值并检索它怎么会这么难。无论如何,这就是我到目前为止所做的
效果:
export class idEffects {
saveId$ = createEffect(() =>
this.actions$
.pipe(
ofType(idActions.addIdAction),
tap(payload => {
console.log("action",payload);
})
)
,{dispatch: false});
constructor(
private actions$: Actions
) {}
}
操作次数:
export const ADD_ID = '[Id Action] 添加 id';
export const addIdAction = createAction(
ADD_ID,
props<{id: any}>()
)
减速器 ts:
export interface IdState {
id: any;
}
export const defaultId: IdState = {
id: undefined
};
export const idReducer = createReducer (
defaultId,
on(idActions.addIdAction, (state, action) => {
//console.log("Calling id reducer", action);
return {
id: action
}
})
)
和选择器 ts:
export const selectIdState =
createFeatureSelector<IdState>("id")
export const selectIdValue = createSelector(
selectIdState,
id => id
);
现在,这就是我 app.module.ts
中的内容StoreModule.forRoot({id: idReducer}),
EffectsModule.forRoot([IdEffects]),
StoreModule.forRoot(reducers, {
metaReducers
}),
StoreDevtoolsModule.instrument({maxAge: 25}),
StoreRouterConnectingModule.forRoot({
stateKey: 'router',
routerState: RouterState.Minimal
})
似乎存储数据运行良好,因为我的控制台中的 Redux 面板 return 这个:
id(pin):"1"
data(pin):"Hello There"
type(pin):"[Id Action] add id"
但是,当我尝试检索这个对象时,我得到一个 undefined
并且我是这样做的:
this.id$ = storeId.pipe(select(selectIdValue))
并在 html
<h4>The id obj is: {{id$ | async}}</h4>
但它什么也没写。我尝试在组件中使用订阅来获取结果,它让我明白了 undefined
怎么可能?
状态是
export interface IdState {
id: any;
}
因此select或者应该select从它的特征状态中识别
export const selectIdValue = createSelector(
selectIdState,
state => state.id, // selectIdState returns an object of IdState interface.
);
然后,reducer,它应该将 id
prop 添加到状态,而不是 action
on(idActions.addIdAction, (state, action) => {
//console.log("Calling id reducer", action);
return {
...state, // not needed in your case, but a good style.
id: action.id, // <- .id
}
}),
效果,不需要,可以去掉。
最后一点是 reducers
变量。你能分享它的来源吗?
应该是
const reducers = {
id: idReducer, // id key is important, idReducer is enough for now.
};
别忘了派遣到某个地方addIdAction
。
例如在组件的 ngOnInit
中。
this.store.dispatch(addIdAction({id: 'value'}));
如果您有类似的东西 - 它应该可以工作。 如果您有更多问题,请告诉我。