Redux with React - 正确的方式与组件共享商店

Question

Redux的商店服务是React App中各种组件最终使用的服务.由它暴露的方法(例如dispatch,getState和subscribe)被所有类型的组件(如容器或表示)使用.

我认为通过这种商店服务的方法是一个重要的设计决策.我看到两种方法,它们是:

1)将商店作为道具传递给所有嵌套级别的每个组件.这不是推荐的.

2)使用像react-redux这样的工具,它在上下文的帮助下,使商店(状态和调度准确)可用于任何需要的地方.

我的问题是:为什么不在任何需要的地方进口商店.对于基于SPA的React App,商店将是单身人士.嵌套在任何级别的组件都可以简单地导入存储.我们为什么要采用上述两种方法中的任何一种？

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

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 FAQ涵盖了这个问题,请访问http://redux.js.org/docs/FAQ.html#store-setup-multiple-stores.

总结:虽然您可以直接导入商店,但是您将代码绑定到该商店实现,这使得它更难以重复使用并且更难以测试.理想情况下,您自己的代码实际上都没有直接引用该商店.连接组件,中间件和thunked动作创建器都通过依赖注入接收相关dispatch和getState函数引用,使它们可重用并允许轻松模拟测试行为.