reactjs - Redux with React - 与组件共享存储的正确方法

Question

React 应用程序中的各种组件最终使用 Redux 的存储服务。它公开的方法(如dispatch、getState和subscribe)可供所有类型的组件(如容器或展示)使用。

我认为传递商店服务的方法是一个重要的设计决策。我看到两种方法，它们是:

1) 将 store 作为 prop 传递给所有嵌套级别的每个组件。这不是推荐的。

2)使用像react-redux这样的工具，它在上下文的帮助下，使存储(确切地说是状态和调度)在任何需要的地方可用。

我的问题是:为什么不简单地将商店导入到需要的地方。对于基于 SPA 的 React 应用程序，store 将是一个单例。任何级别嵌套的组件都可以简单地导入存储。为什么我们应该采用上述两种方法中的任何一种？

对于任何嵌套级别的组件:我们可以这样做吗

import store from  "path/to/store";

let MyComponent = () => {
    let state = store.getState();

    return (
        <div onClick={() => {
            store.dispatch({
                type: "SOME_EVENT",
                payload: store.somedata
            });
        }}>{state.dataINeedHere}</div>
    );
};

export default MyComponent;

而不是

import { connect } from "react-redux";

let MyComponent = ({somedata, onMyAction}) => {
    let state = store.getState();

    return (
        <div onClick={() => {
            onMyAction(somedata);
        }}>{somedata}</div>
    );
};

const mapStateToProps = (state) => {
  return {
    somedata: state.somedata
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onMyAction: (input) => {
      dispatch({
          type: "SOME_EVENT",
          payload: input
      });
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

Answer 1

Redux 常见问题解答涵盖了这个问题，地址为 http://redux.js.org/docs/FAQ.html#store-setup-multiple-stores .

总结:虽然您可以直接导入商店，但您将代码与该商店实现绑定(bind)在一起，这使得它的可重用性降低并且更难以测试。理想情况下，您自己的代码实际上不会直接引用商店。连接的组件、中间件和 thunked 操作创建者都通过依赖项注入(inject)接收相关的 dispatch 和 getState 函数引用，使它们可重用并允许轻松模拟行为以进行测试。