将SWR与Redux结合使用是否合规？是否会影响性能？

我在项目中同时使用了SWR（与Axios集成）和Redux，具体用法如下：

const vehiclesStates = useSelector(({ vehiclesStates: state }) => state); // REDUX
const response = useFetch("/vehicles/states") // SWR
const dispatch = useDispatch(); // REDUX

// REDUX
useEffect(() => {
  if(response.data) dispatch(VehiclesStatesActions.setVehiclesStates(response.data.result))
}, [response.data, dispatch]);

if(response.error) return <div>ERROR - {response.error.toString()}</div> // SWR
else if(!response.data) return <div>LOADING</div> // SWR

// 若无返回则渲染组件
return (<></>)

我的思路是：用SWR获取数据后存入Redux状态，其他需要该数据的组件只需通过Redux的useSelector引入即可，不用每个组件都调用useFetch。我觉得这种方式比纯用SWR更实用，但不确定这个用法是否正确，以及会不会影响性能，希望能得到解答。

用法正确性分析 #

你的这种用法是完全可行的，本质上是让SWR承担远程数据的获取、缓存、后台重验证等核心工作，同时借助Redux作为全局状态的“中转站”，让跨组件、跨页面的数据共享更便捷。不过有几个细节可以优化得更严谨：

• 避免无意义的状态更新：可以增加数据对比逻辑，只有当Redux现有状态和SWR返回的数据不一致时再触发dispatch，防止重复更新导致组件不必要的重渲染：

  import { isEqual } from 'lodash'; // 或自定义深比较函数
  
  useEffect(() => {
    if(response.data && !isEqual(vehiclesStates, response.data.result)) {
      dispatch(VehiclesStatesActions.setVehiclesStates(response.data.result))
    }
  }, [response.data, dispatch, vehiclesStates]);
  

• 错误状态的全局同步（可选）：目前你只在当前组件处理了SWR的错误提示，如果其他组件也需要感知这个错误状态，可以把错误信息同步到Redux中，让全局组件都能获取到错误上下文。

性能影响分析 #

这种模式的性能开销非常小，甚至在多组件共享数据的场景下更有优势，具体来说：

• SWR的核心优势完全保留：SWR的缓存机制、后台静默重验证、请求防抖等特性不会因为同步到Redux而丢失，依然能保证数据的新鲜度和获取效率。
• 减少重复请求与状态同步开销：对比“每个组件都调用useFetch”的方式，用Redux做全局中转可以避免多个组件初始化时的状态同步开销，即使SWR会缓存，多组件调用仍会有少量的初始化逻辑执行，而Redux的useSelector直接读取内存中的状态，更高效。
• 注意重渲染优化：需要留意useSelector的返回值，如果返回的是对象/数组引用，即使数据内容没变化，组件也可能触发重渲染。建议通过useSelector的第二个参数（自定义比较函数）优化：

  import { shallowEqual, useSelector } from 'react-redux';
  
  const vehiclesStates = useSelector(
    ({ vehiclesStates: state }) => state,
    shallowEqual // 或根据数据结构使用深比较函数
  );
  

  这能有效避免不必要的组件重渲染，进一步提升性能。

适用场景总结 #

这种模式非常适合需要全局共享远程数据，且多个组件依赖这份数据的场景。如果只是单个组件使用数据，纯用SWR会更简洁；但如果是跨页面、跨复杂组件树的全局数据共享，结合Redux会让状态管理逻辑更清晰。

内容的提问来源于stack exchange，提问作者Alexssander Leal Luz