Должен ли я запускать асинхронный код в крючке useEffect или в действии-создателе-thunk

ProgramBox

Должен ли я запускать асинхронный код в крючке useEffect или в действии-создателе-thunk

Post author:admin
Запись опубликована:11 января, 2022
Post category:Вопросы по программированию

#reactjs #redux

Вопрос:

Я просматриваю учебник react, и Макс обсуждает создателя действий thunk в разделе Redux . Однако асинхронный код может быть написан как в крючке useEffect, так и с помощью action-creator-thunk . Какой подход будет лучше ? Даст ли написание отдельного действия-создателя-thunk вместо эффектов использования какую-либо дополнительную выгоду или прирост производительности .

код для действия-создатель-thunk cart-actions.js

 export const fetchCartData = () => {
  return async (dispatch) => {
    const fetchData = async () => {
      const response = await fetch(
        'https://react-http-6b4a6.firebaseio.com/cart.json'
      );

      if (!response.ok) {
        throw new Error('Could not fetch cart data!');
      }

      const data = await response.json();

      return data;
    };

    try {
      const cartData = await fetchData();
      dispatch(
        cartActions.replaceCart({
          items: cartData.items || [],
          totalQuantity: cartData.totalQuantity,
        })
      );
    } catch (error) {
      dispatch(
        uiActions.showNotification({
          status: 'error',
          title: 'Error!',
          message: 'Fetching cart data failed!',
        })
      );
    }
  };
};

код для эффекта использования

 function App() {
  const dispatch = useDispatch();
  const showCart = useSelector((state) => state.ui.cartIsVisible);
  const cart = useSelector((state) => state.cart);
  const notification = useSelector((state) => state.ui.notification);

  useEffect(() => {
    const sendCartData = async () => {
      dispatch(
        uiActions.showNotification({
          status: 'pending',
          title: 'Sending...',
          message: 'Sending cart data!',
        })
      );
      const response = await fetch(
        'https://react-http-6b4a6.firebaseio.com/cart.json',
        {
          method: 'PUT',
          body: JSON.stringify(cart),
        }
      );

      if (!response.ok) {
        throw new Error('Sending cart data failed.');
      }

      dispatch(
        uiActions.showNotification({
          status: 'success',
          title: 'Success!',
          message: 'Sent cart data successfully!',
        })
      );
    };

    if (isInitial) {
      isInitial = false;
      return;
    }

    sendCartData().catch((error) => {
      dispatch(
        uiActions.showNotification({
          status: 'error',
          title: 'Error!',
          message: 'Sending cart data failed!',
        })
      );
    });
  }, [cart, dispatch]);

  return (
    <Fragment>
      {notification amp;amp; (
        <Notification
          status={notification.status}
          title={notification.title}
          message={notification.message}
        />
      )}
      <Layout>
        {showCart amp;amp; <Cart />}
        <Products />
      </Layout>
    </Fragment>
  );
}

1. Что лучше… самоуверенна. Это также зависит от конкретного случая использования, требований, комфорта и знакомства разработчиков, стандартов кодирования команды/проекта и т.д… гораздо больше, чем просто код в одиночку. FWIW функциональность выглядит примерно одинаковой, поэтому разница в производительности будет незначительной. Для повторного использования кода код в useEffect нем также может быть учтен в функции.

2. Неправильно сравнивать их IMO. useEffect и thunks служат разным целям . Когда вы отправляете действие, которое выполняет асинхронные задачи, такие как вызов API, вам нужно использовать thunks, потому что создатели действий redux просто возвращают обычный объект и не будут выполнять никаких побочных эффектов . С другой стороны, эффект использования никак не связан с redux . Итак, вопрос здесь в том, где сделать вызов API в thunk или в useEffect ? . так что, как упоминал @DrewReese, это зависит от обстоятельств .

3. Мистер Шьям . Макс обсуждает, где должны выполняться побочные эффекты (будь то в useEffect или в action creator). Есть два разных способа сделать одно и то же, поэтому мой вопрос в том, какой из них лучше ? ) . Пожалуйста, сначала посетите курс, а затем дайте мне ответ . горка

4. Ни то, ни другое, или это просто вопрос мнения, которое «лучше». В том-то и дело. Выберите тот, который лучше всего подходит для вашего текущего варианта использования. Ваш вопрос скорее больше «Должен ли я запускать асинхронный код в useEffect крюке или в асинхронном действии?»

5. @rajgopalbh4 Это обычная практика использования thunk, когда вам нужно вызвать api и сохранить значение в хранилище, а также использовать useEffect для вызова API для сохранения значения в состоянии компонента . Поэтому в вашем случае я бы предпочел использовать thunk , потому что вы обновляете магазин .

Ответ №1:

Однако асинхронный код может быть написан как в крючке useEffect, так и с помощью action-creator-thunk . Какой подход будет лучше ?

Это зависит от ваших требований и архитектуры. Redux реализует архитектуру потока.

Основное различие между redux thunk и useEffect подходом заключается в том, что redux thunk может быть отправлен из любого места (даже не из компонента), пока useEffect он привязан к компоненту.

Модуль redux легче тестировать, потому что он изолирован от компонента. Конечно, вы также можете улучшить тестирование с помощью этого useEffect подхода, выделив логику в отдельную функцию, но тогда ваша извлеченная функция станет функцией, подобной «thunk».

1. Спасибо. Рене . Да, Redux thunk выигрывает гонку . Согласованный. вы правы на 100%. Redux thunk может быть отправлен из любого места (даже не из компонента), в то время как эффект использования привязан к компоненту

Метки: Должен ли я запускать асинхронный код в крючке useEffect или в действии-создателе-thunk