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

Question

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

这是一个代码示例：

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

是的，这对大多数情况都很好。

您还可以考虑在快递 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));
  }
};

一个更高级的选项是通过在请求完成之前分派一个事件来乐观地更新您的商店（和 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 如何工作

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

Saving data to redux vs making API calls to backend

javascript

reactjs

redux

redux-thunk