javascript - 将数据保存到 redux 与对后端进行 API 调用

Question

所以我有一个依赖 redux-thunk 和 Express 后端的应用程序。同时获取数据和发出发布请求是否被认为是好的做法？

这是一个代码示例:

export const getProducts = () => async (dispatch) => {
  const { data } = await API.getProducts();
  dispatch({ type: 'GET_PRODUCTS', payload: data });
};

export const createProduct = (proData) => async (dispatch) => {
  const { data, status } = await API.createProduct(proData);
  if (status === 200) {
    dispatch(getProducts());
  }
};

Answer 1

是的，大多数情况下都可以。

您还可以考虑在 Express api 的响应中返回新产品，并在 createProduct 完成后将其添加到 redux，如下所示:

export const createProduct = (proData) => async (dispatch) => {
  const { data, status } = await API.createProduct(proData);
  if (status === 200) {
    // add product to state
    dispatch(productCreated(data));
  }
};

更高级的选项是通过在请求完成之前分派(dispatch)事件来乐观地更新您的商店(和 UI)。

export const createProduct = (proData) => async (dispatch) => {
  dispatch(productCreatedPending(proData));
  const { data, status } = await API.createProduct(proData);
  if (status !== 200) {
    // Handle error by dispatching another action to fix the state
    // or however you want
  }
};

取决于您希望 UI 如何工作