Вызовите асинхронное действие после обновления состояния реакции

Question

Я новичок в react js. У меня есть действие,

export const updateActivePage = (activePage) => {
  return {
    type: UPDATE_ACTIVEPAGE,
    payload: activePage
  }
}

В моем редукторе,

const initialState = {
 activePage: 1,
}
case UPDATE_ACTIVEPAGE:  {
      return {
        ...state,
        activePage: activePage
      }
    }

В моем контейнере,

handlePageChange = (pageNumber) => {
    this.props.updateActivePage(pageNumber);
    this.props.fetchUserJd(this.props.activePage);
  }

Теперь здесь я хочу вызывать эту функцию this.props.fetchUserJd(this.props.activePage); только тогда, когда предыдущее действие успешно обновило это значение. Поскольку это не возвращает никакого обещания.

Теперь у меня есть решение, которое является функцией обратного вызова. Но почему-то .then в этом случае недоступен, поскольку первая функция не возвращает никакого обещания. любая помощь будет полезна.

Answer 1

Вы можете выполнить следующее: в вашем mapDispatchToProps fn вернуть действия, подобные следующим:

function mapDispatchToProps(dispatch) {
    return {
         updateActivePage: (pageNumber) => {
            return new Promise((resolve, reject) => {
                dispatch(actions.updateVisualState(pageNumber, resolve, reject));
            });
        }
};

, в этом случае вы сможете использовать их для ваших действий в представлении:

this.props.updateActivePage(pageNumber).then(()=>{
  this.props.fetchUserJd(this.props.activePage);
})

Вам просто нужно выбрать правильное место, чтобы выполнить обещание.