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

Question

I'm building my first app with React + Redux and I have come across an issue and I'm not sure of the best way to deal with it.

I have a "Filter" and a "List" component. The list is just a list of records and the contents of the list is determined by the filter settings. This is how I think it should work:

• Filter field is changed in the Filter component
• Redux 'FILTER_UPDATE' action is fired, this triggers a post request to the server with the new filter settings
• Filter reducer updates the 'filter' state to reflect the new filter settings in React

The next part is where I am getting stuck:

• Once the update filter AJAX request is completed I need to trigger the action that fetches the list items again so the server can return the list based on the new filter settings

Here's what I have tried. This is the function in the filter component which fires the action:

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
}

The problem is that the getList() action is fired too quickly. I need to wait for the updateFilter() AJAX request to complete so that the server is aware of the filter settings when it resends the items.

Which is the best way to trigger the getList() action but only once the updateFilter() AJAX request is completed?

Here are the two actions updateFilter() and 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
    }
}

Here are the relevant parts from the List and Filter reducers:

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

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

Thank you all in advance.

Answer 1

At least you should wait server answer:

export function getList() {

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

See axios examples

Answer 2

There are many lib and solution to do that, you can start by looking at redux-thunk that can be suited for your implementation. It aims to manage async action that can fire another action.