React-Redux中如何正确使用useSelector和useDispatch Hook？

React-Redux从7.1版本开始提供useSelector和useDispatch两个Hook，函数组件不再需要写connect高阶函数，也能直接与Redux store交互。很多从connect迁移过来的开发者，一开始会把它们简单理解为mapStateToProps和mapDispatchToProps的替代品，但useSelector的渲染触发机制与connect存在明显差异。如果忽略这些差异，代码可能频繁触发组件重渲染，导致列表页或仪表盘出现卡顿。

一、useSelector的等值比较机制

useSelector接收一个selector函数，该函数以整个store的state为入参，返回组件需要订阅的那一小部分数据。组件挂载后，React-Redux会在store中注册订阅，每次dispatch action时都会执行一次selector，并将返回结果与上一次结果做比较。这个比较默认使用严格相等（===），而不是浅比较。这意味着如果selector返回一个对象或数组，即使内部数据没有变化，只要引用地址变了，组件就会被强制重渲染。

看一个常见的错误写法：在组件里直接从state中拼接新对象。

const user = useSelector(state => ({
  name: state.user.name,
  age: state.user.age,
}));

这段代码每次dispatch任何action都会得到一个新的对象，引用必然不同，组件会无条件重渲染。正确的做法是返回原始引用，或者返回多个基础类型值。例如直接返回state.user.name和state.user.age，或者拆成两个useSelector分别获取。

const name = useSelector(state => state.user.name);
const age = useSelector(state => state.user.age);

如果确实需要返回多个字段组成的对象，可以给useSelector传入第二个参数shallowEqual，让React-Redux使用浅比较代替严格相等。这样只有当对象内部字段真正变化时才会触发渲染。

import { useSelector, shallowEqual } from 'react-redux';

const { name, age } = useSelector(state => ({
  name: state.user.name,
  age: state.user.age,
}), shallowEqual);

这里需要注意，shallowEqual只比较一层字段，如果state中有嵌套对象或数组，仍然需要结合createSelector或手动拆分。useSelector会在store状态变化后重新执行selector，因此selector本身应该保持纯函数，不要在内部做副作用或修改state。

二、useDispatch与异步Action的配合

useDispatch的返回值是Redux store的dispatch函数，在同一个组件多次渲染中引用保持稳定。这一点很重要，因为你可以放心地把dispatch放进useEffect或useCallback的依赖数组中，不必担心导致额外执行。不过即使引用稳定，通常还是建议直接使用dispatch，不需要额外包裹。

import { useDispatch } from 'react-redux';

function AddButton() {
  const dispatch = useDispatch();
  return (
    <button onClick={() => dispatch({ type: 'counter/increment' })}>
      加一
    </button>
  );
}

上面的示例使用了手写action.type，在小型项目里可以接受，但action字符串散落各处容易拼写错误。结合Redux Toolkit的createSlice，可以从slice.actions中导出action creator，再用dispatch调用，既保持类型推断，又减少魔法字符串。

import { useDispatch } from 'react-redux';
import { increment } from './counterSlice';

function AddButton() {
  const dispatch = useDispatch();
  return (
    <button onClick={() => dispatch(increment())}>
      加一
    </button>
  );
}

对于异步请求，Redux Toolkit提供了createAsyncThunk。我们可以把异步逻辑放在thunk中，组件里使用useSelector读取pending、fulfilled、rejected状态。下面是一个拉取用户列表的例子。

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

export const fetchUsers = createAsyncThunk('users/fetchUsers', async () => {
  const response = await fetch('/api/users');
  return response.json();
});

const usersSlice = createSlice({
  name: 'users',
  initialState: { list: [], status: 'idle', error: null },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUsers.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchUsers.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.list = action.payload;
      })
      .addCase(fetchUsers.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      });
  },
});

组件中派发fetchUsers，并根据status渲染不同UI。这样异步状态完全交给Redux管理，组件只负责展示和触发行为，逻辑更集中，测试也更容易。

import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchUsers } from './usersSlice';

function UserList() {
  const dispatch = useDispatch();
  const { list, status, error } = useSelector(state => state.users);

  useEffect(() => {
    if (status === 'idle') {
      dispatch(fetchUsers());
    }
  }, [status, dispatch]);

  if (status === 'loading') return <p>加载中...</p>;
  if (status === 'failed') return <p>出错：{error}</p>;

  return (
    <ul>
      {list.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

三、性能优化与selector设计原则

useSelector虽然方便，但订阅的state范围越大，组件重渲染的概率越高。一个常见场景是列表页需要从Redux中取出过滤后的数据。如果直接在selector里调用filter，每次store更新都会生成新数组，即使过滤条件没变，也会导致列表组件重新渲染。

// 不推荐：每次执行都返回新数组
const visibleUsers = useSelector(state =>
  state.users.list.filter(user => user.active)
);

针对这类派生数据，可以使用Reselect库提供的createSelector。它具备记忆化能力，只有当输入选择器返回的原始数据发生变化时，才会重新计算结果。这能有效避免无关状态更新引发的重复计算和渲染。

import { createSelector } from '@reduxjs/toolkit';

const selectUserList = state => state.users.list;
const selectActiveUsers = createSelector(
  [selectUserList],
  list => list.filter(user => user.active)
);

const visibleUsers = useSelector(selectActiveUsers);

另一个优化方向是拆分组件。一个大型组件如果同时订阅用户信息、订单列表、通知数量，任何一个字段变化都会让整个组件重新渲染。把不同数据拆到子组件中，每个子组件只订阅自己需要的部分，重渲染范围就能被限制在最小单元。这也符合React组件化的设计思路，能让state与UI的映射更加清晰。

需要强调，useSelector的第二个参数shallowEqual不能解决所有引用变化问题。对于深层嵌套结构，可以考虑把state规范化存储，避免深层次对象在更新时产生大范围变动。Redux Toolkit内部使用Immer，让我们可以原地修改state，但实际仍然会生成新的引用，因此在selector层面保持稳定返回仍然要靠拆分选择和记忆化。

最后，不要在selector内部执行网络请求或修改DOM，这类副作用应该放在useEffect或事件处理函数中。selector的唯一职责是从store中读取数据。如果发现selector越来越复杂，可以把它拆分为多个小selector组合，或者用createSelector把计算过程独立出来。这样既能提升可测试性，也有助于React-Redux的渲染优化。

React-ReduxuseSelectoruseDispatch修改时间：2026-09-26 03:20:12