Не могу получить значения из магазина ngrx - PullRequest
Новая
       80

Не могу получить значения из магазина ngrx

1 голос
/ 04 мая 2020

Я сталкиваюсь с NgRx, и я не могу понять, как может быть так сложно добавить значение в магазин и получить его. Во всяком случае, это то, что я сделал до сих пор

Эффекты ts: 

export class idEffects {

    saveId$ = createEffect(() =>
    this.actions$
        .pipe(
            ofType(idActions.addIdAction),
            tap(payload => {
                console.log("action",payload);
            })
        )
    ,{dispatch: false});

    constructor(
      private actions$: Actions
    ) {}
  }

Actions ts:

export const ADD_ID = '[Id Action] add 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 в моей консоли возвращает следующее: 

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, как это возможно?

1 Ответ

1 голос
/ 05 мая 2020

состояние 

export interface IdState {
    id: any;
}

, поэтому селектор должен выбрать id из своего состояния функции 

export const selectIdValue = createSelector(
    selectIdState,
    state => state.id, // selectIdState returns an object of IdState interface.
);

, затем редуктор должен добавить в состояние id, не 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'}));

Если у вас есть такие вещи - это должно работать. Дайте мне знать, если у вас есть еще вопросы.

...