Reactjs 如果存在，则从存储中提取数据，否则在React中调用API

假设我有一个名为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
  });
};

如何将此代码更改为：

如果redux商店已经加载了该书，请将其退回

如果商店里没有书-调用相关的API

---

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

您可以这样尝试：

  componentDidMount() {
    if(this.props.book==null){
       this.props.getBook(areaId);
    }
  }

我假设您的道具中有一个名为

book

的属性。从特定减速器填充的。

---

您必须订阅特定的reducer才能获得

this.props.book

-这将提供您在商店中拥有的价值。

您可以在异步操作创建者中拥有

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

更多