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

Redux的商店服务最终被React App中的各种组件所使用。由它公开的方法（例如dispatch，getState和subscribe）被各种组件（如容器或表示）使用。Redux与React - 正确的方式与组件共享商店

我认为通过这个商店服务的方法是一个重要的设计决定。我看到两种方法，它们是：

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);

来源

2016-04-15 Vijey

在你的“我们能做到这一点”的例子中，什么会导致你的组件在某些状态改变时重新渲染？ – azium

我会订阅顶级的状态更改并触发重投 – Vijey

您是否看过mobx/mobx-react？听起来像你所描述的。 – azium

该Redux常见问题涵盖此问题，在http://redux.js.org/docs/FAQ.html#store-setup-multiple-stores。

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

来源

2016-04-15 17:26:12 markerikson

考虑一下，当你有一个第二MyComponent的，它从不同的部分管理数据会发生什么商店。你选择是告诉对方究竟是如何访问/更新其数据：

<Container> 
    <MyComponent path="https://stackoverflow.com/a/b/c" /> 
    <MyComponent path="https://stackoverflow.com/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的非常简单，和更灵活。

来源

2016-04-15 05:35:35

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

回答

相关问题