React异步代码应当放在useEffect钩子还是action-creator-thunk中运行？

两种方案不存在绝对的优劣，需要根据项目规模、逻辑复用需求等实际场景选择。Redux Thunk 本身不会带来直接的性能提升，其核心优势体现在工程可维护性和逻辑复用层面。

参考代码示例 #

Redux Thunk 异步实现 #

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

useEffect 异步实现 #

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 && (<Notification status={notification.status} title={notification.title} message={notification.message} />)}
      <Layout>
        {showCart && <Cart />}
        <Products />
      </Layout>
    </Fragment>
  ); 
}

适用场景区分 #

• 小型项目、异步逻辑仅在单个组件中使用、无跨组件复用需求：优先选 useEffect 方案，代码更直接，不需要额外引入Redux抽象层，开发效率更高。
• 中大型项目、异步逻辑需要跨组件调用、和全局状态强绑定：优先选 Redux Thunk 方案。

Redux Thunk 相比 useEffect 的核心优势 #

• 逻辑可复用：同一个thunk异步逻辑可以在任意组件、甚至非组件的公共方法中直接通过dispatch调用，不需要每个用到的组件都重复编写异步请求代码，后续调整接口逻辑、报错规则只需要修改一次thunk即可全局生效。
• 逻辑与视图解耦：异步逻辑统一收敛在Redux的action层维护，组件只需要关注触发动作和状态渲染，不需要关心请求的具体实现细节，代码分层更清晰，维护成本更低。同时thunk逻辑可以脱离React组件环境单独编写测试用例，测试效率远高于耦合在useEffect里的异步逻辑。
• 复杂异步流程处理更便捷：如果涉及串行/并行请求、请求防抖/节流、请求取消这类复杂逻辑，放在thunk里统一处理更方便，也可以很方便的和其他Redux中间件配合实现请求重试、日志埋点等通用能力，避免组件代码过度臃肿。
• 规避闭包陷阱：耦合在useEffect里的异步逻辑很容易因为依赖项漏写、闭包缓存问题拿到旧的状态，而thunk可以随时通过内置的getState方法拿到最新的全局状态，不需要额外处理useEffect依赖项问题。

性能说明 #

两种方案的异步请求开销、状态更新开销本质上没有区别，Redux Thunk本身不会带来直接的性能提升。不过在部分场景下，thunk可以更方便的实现请求防抖、重复请求拦截等逻辑，反而能减少不必要的重复请求开销，而如果在useEffect中实现这类能力，需要额外维护共享的请求状态，实现成本更高。

内容的提问来源于stack exchange，提问作者rajgopalbh4