React/Redux - 前一个动作完成后触发动作答案

【问题标题】：React/Redux - Trigger action once previous action has completedReact/Redux - 前一个动作完成后触发动作
【发布时间】：2016-10-02 10:16:10
【问题描述】：

我正在使用 React + Redux 构建我的第一个应用程序，我遇到了一个问题，我不确定最好的解决方法。

我有一个“过滤器”和一个“列表”组件。该列表只是一个记录列表，列表的内容由过滤器设置决定。这就是我认为它应该工作的方式：

过滤器组件中的过滤器字段已更改
Redux 'FILTER_UPDATE' 操作被触发，这会触发使用新过滤器设置向服务器发送 post 请求
过滤器缩减器更新“过滤器”状态以反映 React 中的新过滤器设置

下一部分是我卡住的地方：

更新过滤器 AJAX 请求完成后，我需要再次触发获取列表项的操作，以便服务器可以根据新过滤器设置返回列表

这是我尝试过的。这是触发动作的过滤器组件中的函数：

updateFilter(event) {
    const field = event.target.getAttribute('name');
    const value = event.target.value;
    this.props.updateFilter(field,value); // Updates the filter
    this.props.getList(); // Fetches the new filtered list
}

问题是getList() 动作触发得太快了。我需要等待updateFilter() AJAX 请求完成，以便服务器在重新发送项目时知道过滤器设置。

只有在updateFilter() AJAX 请求完成后才能触发getList() 操作的最佳方式是什么？

这是updateFilter()和getList()的两个动作：

// Update filter
export function updateFilter(field,value) {

    const response = axios.post(API_ROOT+'/filter/update',{
        field: field,
        value: value
    });

    return {
        type: UPDATE_FILTER,
        payload: {field, value}
    }
}

// Get items
export function getList() {

    const response = axios.get(API_ROOT+'/item');

    return {
        type: GET_LIST,
        payload: response
    }
}

以下是 List 和 Filter reducer 中的相关部分：

// Filter reducer
case 'UPDATE_FILTER':
     return update(state,{
        [action.payload.field]: { $set: action.payload.value }
 });

// List reducer
case 'GET_LIST':
     return action.payload.data;

提前谢谢大家。

【问题讨论】：

文档中关于 Async Actions 的章节对此进行了介绍 - 基本上，您需要使用像 redux-thunk 这样的中间件。

标签： javascript reactjs redux react-redux

【解决方案1】：

至少你应该等待服务器回答：

export function getList() {

    axios.get(API_ROOT+'/item').then(function (response) {
       return {
           type: GET_LIST,
           payload: response
       };
    });
}

参见axios 示例

【讨论】：

【解决方案2】：

有很多库和解决方案可以做到这一点，您可以从查看适合您的实现的redux-thunk 开始。它旨在管理可以触发另一个操作的异步操作。

【讨论】：