Question

我使用redux发送动作创建者（AC）。

在这个AC中，我使用redux-thunk将一些数据提取到外部API（Melissa）。

此AC工作正常，但如果我尝试在AC调用之后捕获由商店中的reducer设置的数据，则此值尚未设置。

我如何等待我的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] .Address是我在reducer上在商店中设置的值。

Answer 1

尝试更改你的thunk以返回Promise。这是一个很好的规则来执行你的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;
});

Answer 2

组件应该使用props中的新数据重新呈现，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 ;

我没有创造所有东西以节省时间，但我认为这里有足够的图片可以提供良好的图片。

如何等待Action Creator的结束？

2 个答案: