async data from ngrx-CodePudding

I recently asked a question about working with asynchronous data. I managed to get data from the server.

but it is not possible to update the data on the page...

when calling the getBook() function (app.component.ts), output:

Store {actionsObserver: ActionsSubject, reducerManager: ReducerManager, source: Store, operator: ƒ} '___'

app.component.html:

  <app-layout></app-layout>
<button (click)="getBook()">get data</button>

effect.ts:

    export class AppEffects {
  constructor(private actions$: Actions, private service: StoreService) {}

    update$ = createEffect(() => this.actions$.pipe(

      ofType(GET_DATA),
      exhaustMap(() => 
        this.service.DataLoad()
        .pipe(
            map(
              data => DATA_LOAD(data)
              ),
        )
      )

    ), {dispatch: false});

}

app.component.ts:

      book$: Observable<any> = this.store.select((state:any) => state);

  constructor(private store: Store) {}

  ngOnInit() {

    this.store.dispatch(GET_DATA());

  }

  getBook() {

    console.log(this.book$, '___')

  }

reducer.ts:

export const initialState: any = {
  data: {}
};

export const BookReducer = createReducer(
  initialState,
  on(DATA_LOAD, (state, book) => book.results),
  on(GET_DATA, state => state)
);

action.ts:

export const DATA_KEY = 'DATA';

export const DATA_LOAD = createAction('[DATA] DATA_LOAD',  (book:any) => book);

export const GET_DATA = createAction('[DATA] GET_DATA');

export const featureSelector = createFeatureSelector<any>(DATA_KEY);

CodePudding user response：

Remove the {dispatch: false} config of the effect. This makes it so the load action isn't dispatched, and thus the reducer never receives the action to update the state.