reactjs - 如果存在则从商店获取数据，否则在 React 中调用 API

Question

假设我有一个名为 BookOverview 的组件，它显示一本书的详细信息。

我正在通过操作获取数据:

  componentDidMount() {
    this.props.getBook(areaId);
  }

然后我使用 axios 获取数据:

export const getBook = () => async dispatch => {
  const res = await axios.get(
    `${API}/${ENDPOINT}`
  );

  dispatch({
    type: GET_BOOK,
    payload: res.data
  });
};

我该如何将此代码更改为:

1. 如果 redux 商店已经加载了这本书 - 返回它
2. 如果商店中没有书 - 调用相关 API？

请问实现该目标的最佳做法是什么？

Answer 1

您可以在async action creator 中使用getState，如下所示:

export const getBook = () => async (dispatch, getState) => {
  if(!getState().book /* check if book not present */) {
    const res = await axios.get(
      `${API}/${ENDPOINT}`
    );

    dispatch({
      type: GET_BOOK,
      payload: res.data
    });
  } else {
    dispatch({
      type: GET_BOOK,
      payload: getState().book
    });
  }
};

更多Async Actions-Redux