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常见问题解答涵盖此问题，位于http://redux.js.org/docs/FAQ.html#store-setup-multiple-stores。

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

Answer 2

考虑当你有第二个MyComponent时会发生什么，它管理来自商店不同部分的数据。您可以选择告诉每个人如何访问/更新其数据：

<Container>
   <MyComponent path="/a/b/c" />
   <MyComponent path="/a/b/d" />
</Container>

或者您可以只为每次访问提供所需内容：

<Container>
   <!-- context /a/b was passed to Container -->
   <MyComponent data={c} onUpdate={update(c)} />
   <MyComponent data={d} onUpdate={update(d)} />
</Container>

后者使MyComponent更简单，更灵活。

Redux with React - 使用组件

2 个答案: