React Redux 深入解析：如何访问 Store 对象-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00927/article/details/148361977

React Redux 深入解析：如何访问 Store 对象

react-redux reduxjs/react-redux: React-Redux 是一个用于 React 的 Redux 绑定库，可以用于构建 React 应用程序和组件，支持多种 Redux 功能和工具，如 Redux，Redux-Thunk，Redux-DevTools 等。项目地址: https://gitcode.com/gh_mirrors/re/react-redux

前言

在 React Redux 应用中，Store 是整个状态管理的核心。虽然 React Redux 已经为我们封装好了与 Store 交互的大部分细节，但在某些特殊场景下，我们可能需要直接访问 Store 对象。本文将深入探讨在 React Redux 中访问 Store 的各种方法及其适用场景。

为什么通常不需要直接访问 Store

React Redux 的设计哲学是让组件与 Store 解耦。通过 connect 高阶组件或 useSelector/useDispatch 钩子，组件可以无需直接引用 Store 就能：

获取需要的状态片段
派发 action 更新状态

这种抽象带来了以下好处：

组件可测试性：组件不依赖具体 Store 实现
代码可维护性：状态管理逻辑集中化
架构清晰：明确区分展示组件和容器组件

使用 useStore Hook 访问 Store

React Redux 7.x 提供了 useStore 钩子，这是在函数组件中获取 Store 实例的推荐方式：

import { useStore } from 'react-redux';

function MyComponent() {
  const store = useStore();
  
  // 现在可以访问 store 的方法
  const state = store.getState();
  
  return <div>{/* ... */}</div>;
}

使用场景示例：

在组件生命周期中需要基于当前状态执行逻辑
需要监听 Store 变化但不想订阅整个状态树

理解 React Redux 的 Context 机制

React Redux 内部使用 React Context 来传递 Store。自 v6 版本起，它使用一个名为 ReactReduxContext 的默认 Context 实例。

工作流程：

<Provider> 组件将 Store 放入 Context
connect 或钩子从 Context 中读取 Store

这种设计使得组件树可以深层嵌套，同时仍能访问到顶层的 Store。

自定义 Context 的高级用法

在复杂应用中，你可能需要提供自定义 Context 而非使用默认实例。

单 Store 自定义 Context

const MyContext = React.createContext();

// 在 Provider 中指定自定义 Context
<Provider store={store} context={MyContext}>
  <App />
</Provider>

// 在连接组件时使用相同 Context
connect(mapState, mapDispatch, null, { context: MyContext })(MyComponent)

多 Store 场景处理

虽然 Redux 推荐单 Store 设计，但在某些特殊情况下（如微前端架构），可能需要多 Store：

const AdminContext = React.createContext();
const UserContext = React.createContext();

const adminStore = createStore(adminReducer);
const userStore = createStore(userReducer);

function App() {
  return (
    <Provider store={adminStore} context={AdminContext}>
      <Provider store={userStore} context={UserContext}>
        <RootComponent />
      </Provider>
    </Provider>
  );
}

// 组件连接特定 Store
const ConnectedAdminComponent = connect(
  mapAdminState,
  null,
  null,
  { context: AdminContext }
)(AdminComponent);

直接使用 ReactReduxContext（不推荐）

虽然不推荐，但在极端情况下可以直接消费 Context：

import { ReactReduxContext } from 'react-redux';

class LegacyComponent extends React.Component {
  static contextType = ReactReduxContext;
  
  componentDidMount() {
    const { store } = this.context;
    // 直接使用 store
  }
  
  render() {
    return <div>{/* ... */}</div>;
  }
}

注意：此方法被视为实现细节，可能在未来的版本中发生变化。