来自 ngrx 的异步数据

Question

我最近问了一个关于处理异步数据的问题。我设法从服务器获取数据。

但是无法更新页面上的数据...

调用getBook()函数时(app.component.ts)，输出：

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);

Answer 1

删除效果的{dispatch: false}配置。这使得加载操作不会被分派，因此减速器永远不会收到更新状态的操作。

来自 ngrx 的异步数据

async data from ngrx

angular

typescript

ngrx