javascript - React-redux : listening to state changes to trigger action

Question

我的 redux 状态是这样的:

{
  parks: [
    {
      _id:"ad1esdad",
      fullName : "Some Name"
    },
    {
      _id:"ad1es3s",
      fullName : "Some Name2"
    }
  ],
  parkInfo: {
    id : "search Id",
    start_time : "Some Time",
    end_time : "Some Time"
  }
}

我有一个parkSelector用户从中选择parkId、start_time和end_time的组件

import React, { Component } from 'react';
import { changeParkInfo } from '../../Actions';

class ParkSelector extends Component {

  constructor(props) {
    super(props);

    this.handleApply = this.handleApply.bind(this);
    this.rederOptions = this.rederOptions.bind(this);

    this.state = {
      startDate: moment().subtract(1, 'days'),
      endDate: moment(),
      parkId : this.props.parks[0]
    };
  }

  handleApply(event) {
    this.setState({
      parkId : event.target.parkId.value
      startDate: event.target.start_time.value,
      endDate: event.target.end_time.value,
    });
    this.props.changeParkInfo(this.state.parkId,this.state.startDate,this.state.endDate);
  }


  rederOptions(){
    return _.map(this.props.parks,(park,index)=>{
      return(
        <option value={park._id} key={park._id}>{park.profile.fullName}</option>
      );
    });
  }

  render() {

    return (
      <div className="row">
        <div className="pb-4 col-sm-3">
          <form onSubmit={this.handleApply}>
          <select name="parkId" value={this.state.parkId} className="form-control input-sm">
              {this.rederOptions()}
          </select>
          <input name="start_time" type="date" />
          <input name="end_time" type="date" />
          <button type="submit">Apply</button> 
          </form>
        </div>
      </div>
    )
  }
}

function mapStateToProps(state){
  return {
    parks : state.parks
  };
}

export default connect(mapStateToProps,{ changeParkInfo })(ParkSelector);

我有另一个组件“stats”，它需要显示与 parkInfo 相关的信息这将加载我的 api 请求。

import React, { Component } from 'react';
import StatsCard from '../../components/StatsCard';
import { getDashboardStats } from '../../Actions';

class Dashboard extends Component {

  constructor(props) {
    super(props);
  }

  render() {

    return (
      <div className="animated fadeIn">
        <div className="row">
          <StatsCard text="Revenue Collected" value={9999} cardStyle="card-success" />
          <StatsCard text="Total Checkins" value={39} cardStyle="card-info" />
          <StatsCard text="Total Checkouts" value={29} cardStyle="card-danger" />
          <StatsCard text="Passes Issued" value={119} cardStyle="card-warning" />
        </div>

      </div>
    )
  }
}

function mapStateToProps(state){
  return {
    parkInfo : state.parkInfo,
    dashboardStats : state.dashboardStats
  };
}

export default connect(mapStateToProps,{ getDashboardStats })(Dashboard);

我需要调用getDashboardStats每当 dashboardStats 的 redux 状态发生时，都会执行操作(进行 api 调用并将结果存储在 redux 状态的 parkInfo 中)变化。

调用此操作的最佳方式是什么，我已经尝试过 componentWillUpdate但它继续无限更新。这种情况的最佳实践是什么？

Answer 1

我遇到了类似的问题，但找到了合适的方法。我认为这个问题与 Redux 应用程序中 reducer 和订阅者的职责通常如何解释有关。我的项目没有使用 React，它只是 Redux，但潜在的问题是相同的。为了强调回答根本问题，我从一般 Angular 来处理这个主题，而不直接引用您的 React 特定代码。

问题回顾:在应用中，多个操作 P、Q、R 可能会导致状态更改 C。您希望此状态更改 C 触发异步操作 X，而不管操作最初导致状态变化 C。换句话说，异步操作 X 与状态变化耦合，但有意与可能导致变化 C 的各种操作 (P,Q,R) 解耦。这种情况不会发生在简单的 hello-todo 示例，但确实发生在现实世界的应用程序中。

天真的答案1:你不能触发另一个 Action ，它会导致无限循环。

天真的答案2:你不能触发另一个 Action ，reducer不能触发 Action 或引起任何副作用。

虽然这两个天真的答案都是正确的，但他们的基本假设是错误的。第一个错误地假设 Action X 是同步触发的并且没有任何停止条件。第二个错误地假设操作 X 是在 reducer 中触发的。

答案:

在订阅者(也称为渲染器)中以异步方式触发操作 X。乍一听起来可能很奇怪，但事实并非如此。即使是最简单的 Redux 应用程序也能做到这一点。他们监听状态变化并根据变化采取行动。让我解释一下。

订阅者除了呈现 HTML 元素之外，还定义如何触发操作来响应用户行为。除了处理用户行为之外，他们还可以定义如何触发操作以响应世界上的任何其他变化。用户在五秒后单击按钮与 setTimeout 在五秒后触发操作之间几乎没有区别。除了让订阅者将操作绑定(bind)到点击事件或者找到 GPS 位置之外，我们还可以让他们将操作绑定(bind)到超时事件。初始化后，允许在每次状态更改时修改这些绑定(bind)，就像我们在状态更改时重新渲染按钮或整个页面一样。

由 setTimeout 触发的操作将导致类似循环的结构。超时触发操作，reducer 更新状态，redux 调用订阅者，订阅者设置新的超时，超时触发操作等。但同样，与正常渲染和事件与用户行为绑定(bind)所导致的循环结构没有什么区别。它们都是异步的和预期的循环过程，允许应用程序与世界通信并按照我们喜欢的方式运行。

因此，检测订阅者感兴趣的状态变化，并在变化发生时自由地触发操作。推荐使用 setTimeout，即使延迟为零，只是为了让您清楚事件循环的执行顺序。

忙循环当然是一个问题，必须避免。如果 Action X 本身导致这样的状态变化，将立即再次触发它，那么我们就会遇到一个繁忙的循环，应用程序将停止响应或变得缓慢。因此，请确保触发的操作不会导致此类状态更改。

如果您想实现重复刷新机制，例如每秒更新一个计时器，可以用相同的方式完成。然而，这种简单的重复不需要监听状态变化。因此，在这些情况下，最好使用 redux-thunk 或编写异步操作创建器。这样代码的意图就变得更容易理解。