React/Redux - 上一个动作完成后触发动作

Question

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

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

过滤器组件中的过滤器字段已更改
Redux 'FILTER_UPDATE' 动作被触发，这会触发 post 向服务器请求新的过滤器设置
Filter reducer 更新 'filter' 状态以反映 React

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

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

这是我试过的方法。这是触发操作的过滤器组件中的函数：

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;

提前谢谢大家。

Answer 1

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

Answer 2

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

export function getList() {

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

参见 axios 个示例

React/Redux - 上一个动作完成后触发动作

React/Redux - Trigger action once previous action has completed

javascript

reactjs

redux

react-redux