时间戳

首页 > 解决方案 > 如何在 React Redux 中访问“商店”？（或如何链接动作）

reactjs - 如何在 React Redux 中访问“商店”？（或如何链接动作）

问题描述

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

但是，我无法从我的任何非根组件访问“存储”。我发现引用了一些关于它的问题（How to access store in second component in react-redux），但他们只谈论使用Provider=storeHOC 访问道具/动作，而不是访问商店本身来做一些事情，比如向店铺。

（对于我的特定用例，我想听听商店是否“activeUser”发生变化，如果发生变化，则启动一系列附加操作。我相信这很可能可以通过 thunk 和简单地将操作链接到“setActiveUser”动作......所以这个问题更多地是关于如何让听众真正进入商店而不是这个具体问题）

标签： reactjsredux

解决方案

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

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

解决您的问题的最佳方法是接受 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)

我的组件.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 强制响应更改的最佳方式（直到钩子出现）

- 编辑 -

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

MyComponentContainer.js

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通过它的 props 访问函数，你可以在它的componentDidUpdate生命周期中使用它。

您可能决定将其拆分onActiveUserChange为一组单独的函数以获得更好的可组合性。这取决于您和您的用例。

推荐阅读