Сохранение данных в redux против выполнения вызовов API для серверной части

#javascript #reactjs #redux #redux-thunk

Вопрос:

Таким образом, у меня есть приложение, которое полагается на переработку и экспресс-сервер. Будет ли считаться хорошей практикой одновременно собирать данные и отправлять запрос на публикацию?

Вот пример кода:

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

Ответ №1:

Да, это нормально для большинства случаев.

Вы также можете рассмотреть возможность возврата нового продукта в ответе от вашего экспресс-api и добавления его в redux после createProduct завершения, например:

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

Более продвинутым вариантом было бы оптимистично обновить свой магазин (и пользовательский интерфейс), отправив событие до завершения запроса.

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

Зависит от того, как вы хотите, чтобы ваш пользовательский интерфейс работал