Redux store dispatch方法的引用方式及ES6 import使用疑问

算力阿峰

2026-5-28

引用Redux Store的dispatch方法的几种方式

这里整理了几种在React应用中获取并使用Redux store的dispatch方法的常见方式：

使用react-redux的connect方法：这是Redux生态中传统的组件连接方式，通过connect函数的mapDispatchToProps参数，可以直接将dispatch方法或者预先绑定好的action creators传递给组件的props，让组件能发起状态更新。
借助react-redux的
```
return (<Provider />)
```
组件配合钩子/connect：Provider组件的作用是将Redux store注入到整个React组件树中，后续可以在函数组件中使用useDispatch钩子直接获取dispatch，或者结合connect方法来获取，这是目前推荐的主流方式之一。
使用React Context API：你可以自行创建一个Context来存放Redux store，然后在需要的组件中通过useContext钩子或者Context.Consumer组件获取store实例，进而调用store.dispatch方法。
声明全局dispatch变量：直接将store.dispatch赋值给一个全局变量（比如挂载到window对象上），这样任何地方都可以直接调用。不过这种方式不推荐，会导致全局污染，不利于代码维护和测试。
将store.dispatch作为props传递：在父组件中获取到dispatch后，通过props逐层传递给需要的子组件。这种方式适合组件层级较浅的场景，但层级深时会出现“props drilling”的问题，代码冗余且不易维护。
模块导出store并通过ES6 import引用：这就是你提到的偏好方式，直接在store模块中导出整个store实例，其他组件通过import引入后即可调用store.dispatch。示例代码如下：

// store.js
function reducer(state, action) {
  switch (action.type) {
    case "ITEM_UPDATED":
      return Object.assign({}, state, { item: action.item });
    default:
      return state;
  }
}
const store = Redux.createStore(reducer, { item: "cat" });
export default store;

// DumbComponent.js
import store from "./store.js";
const DumbComponent = props => {
  return React.createElement(
    "button",
    { onClick: () => { store.dispatch({ type: "ITEM_UPDATED", item: "dog" }); } },
    "Update to Dog"
  );
};

关于ES6 import方式的特定问题

你提到这种方式样板代码最少，确实在小型项目或者简单场景下非常便捷，但它也存在一些其他方法没有的潜在问题：

测试难度提升：组件直接硬编码依赖了具体的store实例，在单元测试时很难mock或者替换这个store，无法做到组件与store的隔离测试，测试灵活性大打折扣。
扩展性不足：Redux虽然推荐单store架构，但某些特殊场景可能需要多个store实例。这种import方式的组件无法适配多store场景，因为它已经和特定store绑定死了。
开发环境热重载问题：在开发过程中使用热重载功能时，可能会出现store实例没有被正确更新的情况，导致组件使用的是旧的store实例，出现状态不一致的奇怪问题。
组件耦合性高：组件直接依赖于具体的store模块，违反了依赖注入的原则，降低了组件的复用性。比如同一个组件无法在不同的store环境下直接使用，必须修改import路径或者做额外适配。

如果是小型项目或者快速原型开发，这种方式完全可以接受；但如果是大型、需要长期维护的项目，更推荐使用useDispatch钩子或者connect方法，它们更符合Redux的最佳实践，也能避免上述问题。

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

Redux store dispatch方法的引用方式及ES6 import使用疑问

关于ES6 import方式的特定问题 #

关于ES6 import方式的特定问题