React Redux

    React Redux 是 Redux 官方提供的 React 绑定库。它负责把 Redux store 注入 React 应用，并提供 hooks 让组件读取状态和派发 action。

    pnpm add react-redux

    注入 Store

    在应用入口使用 Provider 包裹根组件。

    src/main.jsx
    import { Provider } from 'react-redux';
import { createRoot } from 'react-dom/client';
import App from './App';
import store from './store';

createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <App />
  </Provider>,
);

    读取状态

    使用 useSelector 从 store 中选择组件需要的数据。

    src/App.jsx
    import { useSelector } from 'react-redux';

export default function App() {
  const msg = useSelector((state) => state.app.msg);

  return <div>{msg}</div>;
}

    useSelector 的选择范围应该尽量小，只返回当前组件真正需要的数据，避免无关状态变化引起额外渲染。

    更新状态

    使用 useDispatch 获取 dispatch 方法，再派发 action。

    src/components/Tips.jsx
    import { useDispatch } from 'react-redux';
import { setMsg } from '../store/app-slice';

export default function Tips() {
  const dispatch = useDispatch();

  return (
    <button
      type="button"
      onClick={() => {
        dispatch(setMsg('李四'));
      }}
    >
      更新消息
    </button>
  );
}

    Hooks 与 connect

    新项目优先使用 hooks：

    API用途
    useSelector读取 store 中的状态
    useDispatch获取 dispatch 方法
    useStore获取原始 store 对象，较少使用

    老项目中可能还能看到 connect。它仍然可用，但 hooks 写法更直接，也更符合现代 React 组件组织方式。

    推荐组合

    React 项目里推荐组合是：

    1. 使用 Redux Toolkit 定义 slice 和 store。
    2. 使用 React Redux 的 Provider 注入 store。
    3. 使用 useSelector 读取状态。
    4. 使用 useDispatch 派发 slice 自动生成的 action。

    这套组合可以减少手写订阅逻辑，也能让状态更新路径保持清晰。