Question

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

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

过滤器组件
Redux'FILTER_UPDATE'操作被触发，这会使用新的过滤器设置触发对服务器的发布请求
过滤器缩减器更新“过滤器”状态以反映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请求完成，以便服务器在重新发送项目时知道过滤器设置。

触发getList()操作的最佳方式是哪一种，但只有updateFilter() AJAX请求完成后才会触发？

以下是两项操作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

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

export function getList() {

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

请参阅axios示例

Answer 2

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

React / Redux - 上次操作完成后触发操作

2 个答案: