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

我应如何将此代码更改为：

如果redux商店已经加载了图书，请退还
如果商店中没有书籍，请致电相关的API？

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

Answer 1

您可以这样尝试：

public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "Default",
                url: "DOTAPI/{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );
        }

我假设您的道具中有一个名为componentDidMount() { if(this.props.book==null){ this.props.getBook(areaId); } }的财产。从特定的减速器中填充。
您必须订阅特定的reducer才能获得book-这将提供您在商店中拥有的价值。

Answer 2

您可以在{strong>异步操作创建者中放入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

从存储中获取数据（如果存在），否则在React中调用API

2 个答案: