React Redux действие отправки после того, как другое действие

Question

У меня есть асинхронной действие, которое выборки данных из REST API:

export const list = (top, skip) => dispatch => { 
    dispatch({ type: 'LIST.REQUEST' }); 

    $.get(API_URL, { top: top, skip: skip }) 
     .done((data, testStatus, jqXHR) => { 
      dispatch({ type: 'LIST.SUCCESS', data: data }); 
     }); 
}; 

A синхронизации действие, которое изменяет skip состояние:

export const setSkip = (skip) => { 
    return { 
     type: 'LIST.SET_SKIP', 
     skip: skip 
    }; 
}; 

Начальное состояние для top = 10, skip = 0. В компоненте:

class List extends Component { 
    componentDidMount() {   
     this.list(); 
    } 

    nextPage() { 
     let top = this.props.list.top; 
     let skip = this.props.list.skip; 

     // After this 
     this.props.onSetSkip(skip + top); 

     // Here skip has previous value of 0. 
     this.list(); 
     // Here skip has new value of 10. 
    } 

    list() { 
     this.props.List(this.props.list.top, this.props.list.skip); 
    } 

    render() { 
     return (
      <div> 
       <table> ... </table> 
       <button onClick={this.nextPage.bind(this)}>Next</button> 
      </div> 
     ); 
    } 
} 

Когда кнопка Следующая в первый раз щелкнула, значение skip, которая использует асинхронное действие не изменилось. Как я могу отправить действие после sync action?

Answer 1

Спасибо за ответы, но я сделал это так:

let top = this.props.list.top; 
let skip = this.props.list.skip; 
let newSkip = skip + top; 

this.props.onList(top, newSkip); 
this.props.onSetSkip(newSkip); 

Сначала я вычислить новый skip и направить действия асинхронных с этим новым значением. Затем я отправляю действие syns, которое обновляет skip в состоянии.

Answer 2

Вместо того, чтобы отправлять действие после действия синхронизации, можете ли вы просто вызвать функцию из редуктора?

Так что следует за этим потоком:

вызова действия Sync -> Редуктор вызов ---> корпус функция (редуктор) ---> корпус функция (редуктор)

Вместо обычный поток, который, вероятно, это для вас:

Синхронизировать вызов действия -> Редуктор вызов

Следуйте этому руководству по адресу split the reducers up, чтобы узнать, какие редукторы корпуса.

Если действие, которое вы хотите отправить, имеет побочные эффекты, но тогда правильный способ - использовать Thunks, а затем вы можете отправить действие после действия.

Пример Thunks:

export const setSkip = (skip) => { 
    return (dispatch, getState) => { 

     dispatch(someFunc()); 
     //Do someFunc first then this action, use getState() for currentState if you want 
     return { 
      type: 'LIST.SET_SKIP', 
      skip: skip 
     }; 
    } 
}; 

Answer 3

отправка ({типа: 'LIST.SUCCESS', данные: данные, пропустите: Значение, которое вы хотите после того, как действие синхронизации});

Answer 4

также проверить это redux-sequence-action

Answer 5

Если вы используете redux thunk, вы можете легко комбинировать их. Это промежуточное программное обеспечение, которое позволяет создателям действий возвращать функцию вместо действия.

Возможно, ваше решение сработало для вас, если вам не нужно целенаправлять создателей действий и нужно только запустить их обоих.

this.props.onList(top, newSkip); 
this.props.onSetSkip(newSkip); 

Если вам нужно сцепление (называя их в синхронном режиме) или ожидание от первого направила данные действия пользователя, это то, что я рекомендую.

export function onList(data) { 
    return (dispatch) => { 
      dispatch(ONLIST_REQUEST()); 
    return (AsyncAPICall) 
    .then((response) => { 
     dispatch(ONLIST_SUCCESS(response.data)); 
    }) 
    .catch((err) => { 
     console.log(err); 
    }); 
    }; 
} 

export function setSkip(data) { 
     return (dispatch) => { 
       dispatch(SETSKIP_REQUEST()); 
     return (AsyncAPICall(data)) 
     .then((response) => { 
      dispatch(SETSKIP_SUCCESS(response.data)); 
     }) 
     .catch((err) => { 
      console.log(err); 
     }); 
     }; 
    } 

export function onListAndSetSkip(dataForOnList) { 
    return (dispatch) => { 
    dispatch(onList(dataForOnList)).then((dataAfterOnList) => { 
     dispatch(setSkip(dataAfterOnList)); 
    }); 
    }; 
}