javascript - 状态被另一个 reducer 更新后运行 reducer

Question

假设我有一个带有两个 reducer 的应用程序 - 使用 combineReducers() 组合的 tables 和 footer。

当我点击某个按钮时，将分派(dispatch)两个操作 - 一个接一个:“REFRESH_TABLES” 和 “REFRESH_FOOTER”。

tables reducer 正在监听第一个操作并修改表的状态。第二个操作触发 footer reducer 。 问题是它需要表的当前状态才能完成它的事情。

我的实现如下所示。

按钮组件:

import React from 'react';

const refreshButton = React.createClass({
    refresh () {
        this.props.refreshTables();
        this.props.refreshFooter(this.props.tables);
    },
    render() {
        return (
            <button onClick={this.refresh}>Refresh</button>
        )
    }
});

export default refreshButton;

Action 创建者:

export function refreshTables() {
    return {
        type: REFRESH_TABLES
    }
}

export function refreshFooter(tables) {
    return {
        type: REFRESH_FOOTER,
        tables
    }
}

问题是此时 props 没有更新，因此 footer reducer 获取的表的状态也尚未更新，并且它包含 tables< 之前的数据形式 reducer 运行。

那么，当从 View 中相继调度多个操作时，如何为 reducer 获取新状态？

Answer 1

似乎您需要处理操作异步，以便您可以使用自定义中间件，例如redux-thuk做这样的事情:

actions.js

function refreshTables() {
  return {
    type: REFRESH_TABLES
  }
}

function refreshFooter(tables) {
  return {
    type: REFRESH_FOOTER,
    tables
  }
}

export function refresh() {
  return function (dispatch, getState) {
    dispatch(refreshTables())
      .then(() => dispatch(refreshFooter(getState().tables)))
  }
}

组件

const refreshButton = React.createClass({
  refresh () {
    this.props.refresh();
  },
  {/* ... */}
});