Question

我正试图在我的商店中添加一个侦听器。我在网上找到的每个示例似乎都使用store.subscribe(() => function here)

但是，我无法从任何非root用户组件访问“存储”。我发现有一些关于它的问题（How to access store in second component in react-redux），但他们只谈论使用Provider=store HOC访问道具/动作，而不是访问商店本身来做诸如在商店中添加侦听器的操作。

（对于我的特定用例，我想听听商店了解'activeUser'是否发生更改，如果发生更改，则触发一系列附加操作。我相信可以通过重击和简单链接来解决动作“ setActiveUser”动作...因此，这个问题比这个特定问题更多的是关于如何实际将侦听器访问商店的信息

Answer 1

您要实现的是命令式编程。 react-redux是围绕React的声明性性质设计的，因此可以防止您的组件直接访问存储。

一个肮脏的解决方案是从创建它的Javascript模块中导出商店，使其可以被应用程序的任何其他模块访问。这样，您可以在任何地方进行订阅，而不仅仅是“根组件”。但是，这是anti-pattern，应避免使用。

针对您的问题的最佳解决方案是接受React的声明性并执行以下操作：

MyComponentContainer.js

import {connect} from 'react-redux';
import {MyComponent} from './MyComponent';

function mapStateToProps(state) {
  return {
    activeUser: /* extract the active user from the state object */
  };
}

export const MyComponentContainer = connect(mapStateToProps)(MyComponent)

MyComponent.js

import React from 'react';

export class MyComponent extends React.Component {
  componentDidMount() {
      this.yourChainOfActions(this.props.activeUser);
  }

  componentDidUpdate(prevProps) {
    if(this.props.activeUser.id !== prevProps.activeUser.id) {
      this.yourChainOfActions(this.props.activeUser);
    }
  }

  yourChainOfActions = (activeUser) => {
    // ...
  };

  render() {
    // ...
  }
}

这需要一些思想上的转变，但这是对React做出必要的反应的最佳方法（直到hooks出现）

-编辑-

如果“ yourChainOfActions”包含一堆store.dispatch()调用，则需要授予MyComponent对store.dispatch函数的访问权限。通常，您不会直接传递此函数，而是希望在MyComponentContainer的{{1}}中创建一个包装器，如下所示：

MyComponentContainer.js

mapDispatchToProps

import {connect} from 'react-redux'; import {MyComponent} from './MyComponent'; function mapStateToProps(state) { return { activeUser: /* extract the active user from the state object */ }; } function mapDispatchToProps(dispatch) { return { onActiveUserChange(activeUser) { // use dispatch however you wish here } } } export const MyComponentContainer = connect(mapStateToProps, mapDispatchToProps)(MyComponent)现在将通过其道具访问MyComponent函数，您可以在其onActiveUserChange生命周期中使用它。

您可以决定将componentDidUpdate拆分为多个单独的函数，以实现更好的可组合性。这取决于您和您的用例。

Answer 2

快速的答案是不要在您的组件中这样做！

通常，在定义/建立商店时将执行此操作。也许您有一个将这种订阅与组件耦合的用例，但如果是这样，我会感到非常惊讶。

使用此解决方案，存储可以自行维护，而组件对此完全是被动的-仅触发操作并接收减少的数据。它们不应该影响数据流的业务逻辑。

如何在React Redux中访问``存储''？（或如何链接动作）

2 个答案:

如何在React Redux中访问``存储''？ （或如何链接动作）

2 个答案:

如何在React Redux中访问``存储''？（或如何链接动作）