Как дождаться окончания Action Creator? - PullRequest
Новая
       6

Как дождаться окончания Action Creator?

0 голосов
/ 24 мая 2018

Я использую Redux для отправки создателя действий (AC).

В этом AC я получаю некоторые данные во внешний API (Melissa) с помощью redux-thunk.

Этот AC работаетхорошо, но если я попытаюсь захватить эти данные, которые установлены редуктором в хранилище сразу после вызова AC, это значение еще не установлено.

Как я могу ожидать, что мой AC завершит выполнениеследующая строка моего кода?

Мой AC: 

export function fetchMellisa (value) {
    return dispatch => {
        axios.get( /*URL*/ )
            .then( ({ data }) => {
                dispatch( { type: ACTION_CREATOR_1 , payload: data }
                )
            } ).catch( error => console.error( 'error', error ) );
    };
}

и мой вызов: 

this.props.dispatch(fetchMellisa(values.currentAddress));
const currentAddress = this.props.addressMelissa[ 0 ].Address ;

this.props.addressMelissa [0]. Адрес - это мое значение, установленное в магазинередуктор.

Ответы [ 2 ]

0 голосов
/ 24 мая 2018

Попробуй сменить thunk, чтобы вернуть обещание.Это хорошее правило, которое нужно применять к своим фанатам. 

export function fetchMellisa(url) {
  return dispatch =>
    axios
      .get(url)
      .then(({ data }) => dispatch({ type: ACTION_CREATOR_1, payload: data }))
      .catch(error => {
        console.error("error", error);
        return Promise.reject();
      });
}

Тогда вы можете использовать его следующим образом: 

const url = values.currentAddress;
this.props.dispatch(fetchMellisa(url)).then(() => {
  const newAddress = this.props.addressMelissa[0].Address;
});
0 голосов
/ 24 мая 2018

компонент должен повторно выполнить рендеринг с новыми данными в подпорках, вызов API должен быть в методе жизненного цикла, таком как componentDidMount, или в обработчике событий.если вам нужно было использовать его в строке, то вы должны вернуть axios.get и поставить цепочку .then в исходной отправке. 

export function fetchMellisa (value) {
return dispatch => {
    return axios.get( /*URL*/ )
        .then( ({ data }) => {
            dispatch( { type: ACTION_CREATOR_1 , payload: data }
            )
        } ).catch( error => console.error( 'error', error ) );
  };
}

this.startLoadingMellisa();
this.props.dispatch(fetchMellisa(values.currentAddress))
  .then( response => {
    this.stopLoadingMellisa();
    // do something that releases the loading state
  })

if ( this.state.loading ) { return <SomeLoadingComponentOrMsg/> }
const currentAddress = this.props.addressMelissa[ 0 ].Address ;

я не создал все, чтобы сэкономить время, но я думаю, что естьздесь достаточно, чтобы дать хорошую картину.

...