在mapDispatchToProps中使用thunk

Question

我不知道如何使用异步操作的创作者mapDispatchToProps对react-redux的connect.我正在使用redux-thunk中间件,以下是我的mapDispatchToProps:

function mapDispatchToProps(dispatch) {
    return {
        foo: function() {
            dispatch(someAction());

            return function asyncAction(dispatch, getState) {
                console.log("An async action!");
                dispatch(someOtherAction(getState().foo));
            };
        }
    }
}

但是,当我执行上述操作时,异步操作不会执行.这样做的正确方法是什么？

Answer 1

我建议以不同方式声明你的实际thunk(someOtherAction).在以下示例中,asyncAction是一个返回thunk的异步操作创建器.然后,thunk可以调度其他操作(例如,在promise解析之后).

function asyncActionCreator () {
  return (dispatch, getState) => {
    dispatch(someAction());

    someAsyncStuff().then(() => {
      dispatch(someOtherAction(getState().foo);
    });
  }
}

function mapDispatchToProps(dispatch) {
  return {
    foo: () => dispatch(asyncActionCreator())
  }
}