1

I have a simple Angular Component wired up to an NGRX store. It works in the live application but not in the Storybook render.

I have created a simple action and it should trigger in the ngOnInit() function. I have logged the reducer and can see the action gets called and triggers the Reducer, but the data does not get updated in ReduxDevTools when viewing inside Storybook.

Why is this? Is there a solution for using ReduxDevTools in Storybook with Angular NGRX?

example: (Works in live application - not working in Storybook) in component:

ngOnInit() { this.store.dispatch( loadAccountDebtor({accountId: 300, debtorId: 300}) ); }

in reducer:

.... 
export const currentAccountDebtorReducer = createReducer(
  accInitialState, 

  on(Actions.loadAccountDebtor, (accstate, action) => {
    console.log('loadAccountDebtor::', accstate, action);
    return accstate}),
  on(Actions.loadAccountDebtorSuccess, (accstate, action) => {
    console.log('loadAccountDebtorSuccess::', action.currentAccountDebtor);
    return action.currentAccountDebtor}),
  on(Actions.loadAccountDebtorFailure, (accstate, action) => ({
    ...accstate,
    currentAccountDebtor: null,
    error: action.error}))
);

The loadAccountDebtor action triggers an Api service call (with the action.payload). On success triggers the Success action and this updates the Store. (but nothing is updating in the Storybook ReduxDevTools)

In the Live App the ReduxDevTools are working fine.

cuznerdexter
  • 586
  • 5
  • 21
  • you're returning the same state `accstate ` in reducer's action, try to update the state and return – Zuhair Naqi Oct 10 '21 at 09:32
  • @ZuhairNaqi sorry I must have confused the question. I have a success action that gets triggered (in the live app)(but not the storybook). I will update the question. – cuznerdexter Oct 10 '21 at 15:25

0 Answers0