Question

我在同一层次结构中有两个组件。例如：

             _B
Component A /
            \_C

我需要使用redux访问C中的B的状态值。这怎么可能。 PS：是的，我可以在父母A中存储常见的州值。但是我想在这里使用redux。我的理解是您可以使用redux访问任何组件状态，因为它是在顶级组件级别进行管理的。我可以直接访问组件或操作中的商店吗？

Answer 1

我不确定我是否正确地提问您，但正如您所说，Redux将商店维持在最高组件级别，因此商店可以轻松地供所有子组件使用。事实上，你就是如何使用Redux。

您可以使用连接装饰器创建连接的组件，并将您想要的任何道具从商店传递到组件。例。

/* This is your container component */
const mapDispatchToProps = {
  your actions go here
}

const mapStateToProps = (state) => ({
  state, //pass this if you want to pass entire state
  ...any props that you want to pass
})

export default connect(mapStateToProps, mapDispatchToProps)(Your view component) //this basically connects your actions and state to your view component

如果您不想创建任何连接的组件并且想直接在View组件中访问商店，那么您可以从上下文在构造函数中访问它。实施例。

class Example extends React.Component{
 constructor(props, context) {
    super(props);
    //access your store like this
    var store = context.store;
  }
}

//You can define the context needed for your component like this
Example.contextTypes = {
 store: React.PropTypes.object
};

希望这有帮助。

Answer 2

更新 - 提问者想要使用Redux的上下文。我误解了这个问题。我对这个特定主题没有信心，所以我引用FB React文档。

＆＃34;如果您不熟悉Redux或MobX等状态管理库，请不要使用上下文。对于许多实际应用程序，这些库及其React绑定是管理与许多组件相关的状态的不错选择。

Redux更有可能是解决问题的正确方法，而不是上下文是正确的解决方案。 ...

如果您坚持使用上下文尽管有这些警告，尝试将您对上下文的使用隔离到一个小区域，并尽可能避免在可能的情况下直接使用上下文API，以便在API更改时更容易升级＆＃34;

https://facebook.github.io/react/docs/context.html

如何在React中使用Redux访问其他组件的状态？

2 个答案: