如何从NgRx Store加载数据，5分钟后自动从服务器刷新

完全可以实现你要的场景，核心思路是先从Store读取已有数据，无数据时触发首次加载；同时启动定时任务，每5分钟拉取服务器数据更新Store，具体实现步骤如下：

1. 调整组件数据加载逻辑 #

在需要使用书籍数据的组件中，先检查Store内是否已有数据，无数据则触发API请求；同时启动定时刷新任务：

import { select, Store } from '@ngrx/store';
import { invokeBooksAPI } from './store/books.actions';
import { selectAllBooks } from './store/books.selectors';
import { timer } from 'rxjs';
import { take } from 'rxjs/operators';

constructor(private store: Store) {}

ngOnInit() {
  // 优先从Store取数，无数据则触发首次加载
  this.store.pipe(select(selectAllBooks), take(1)).subscribe(books => {
    if (!books || books.length === 0) {
      this.store.dispatch(invokeBooksAPI());
    }
  });

  // 每5分钟（300000毫秒）触发一次数据刷新
  timer(300000, 300000).subscribe(() => {
    this.store.dispatch(invokeBooksAPI());
  });
}

2. 保留/优化Effects的API处理逻辑 #

你原有的Effects代码可以直接复用，建议添加错误处理增强鲁棒性：

import { EMPTY } from 'rxjs';
import { catchError } from 'rxjs/operators';

loadAllBooks$ = createEffect(() =>
  this.actions$.pipe(
    ofType(invokeBooksAPI),
    switchMap(() => {
      return this.bookService.get()
        .pipe(
          map((data) => booksFetchAPISuccess({ allBooks: data })),
          catchError(() => {
            // 可根据需求添加错误提示或错误action触发逻辑
            return EMPTY;
          })
        );
    })
  )
);

3. 确保Reducer正确更新Store #

确认你的Reducer能正确处理booksFetchAPISuccess动作，将新数据同步到Store：

// books.reducer.ts
interface BooksState {
  allBooks: Book[];
}

const initialState: BooksState = {
  allBooks: [],
};

const _booksReducer = createReducer(
  initialState,
  on(booksFetchAPISuccess, (state, { allBooks }) => ({
    ...state,
    allBooks: allBooks,
  }))
);

export function booksReducer(state: BooksState | undefined, action: Action) {
  return _booksReducer(state, action);
}

核心逻辑说明 #

• 组件初始化时优先从Store读取数据，避免不必要的服务器请求；
• 定时任务通过timer操作符实现，每5分钟触发一次API请求，更新Store内的数据；
• 所有数据更新逻辑统一由Effects和Reducer处理，保证数据流的一致性。

内容的提问来源于stack exchange，提问作者Developer