在 mapDispatchToProps 中使用 thunk

IT技术 reactjs redux react-redux
2021-04-28 05:28:04

我不知道如何使用异步操作的创作者mapDispatchToPropsreact-reduxconnect我正在使用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));
            };
        }
    }
}

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

3个回答

我建议以不同的方式声明您的实际 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())
  }
}

为了完整起见,我将添加这个。我需要使用 1 个动作创建者分派 2 个动作,但第二个动作取决于第一个动作的结果。第二个操作还需要访问存储的不同切片,因此我无法使用我用来设置第一个值的同一个减速器。

我的 mapDispatchToProps,使用 redux-thunk,最终看起来如下:

import constants from '../constants';

const mapDispatchToProps = (dispatch) => {
    return {
        setValuesToStore: (value) => {
            const firstAction = {
                type: constants.SET_FIRST_VALUE,
                value,
            }
            dispatch(firstAction)
            dispatch(secondAction())
            function secondAction() {
                return (dispatch, getState) => {
                    const state = getState()
                    dispatch({
                        type: constants.SET_SECOND_VALUE,
                        state,
                    })
                }
            }
        }
    }
}

这样我就不需要将商店作为module导入,我发现它非常难看。没什么大不了的,只是希望这会有所帮助。

尽管接受的答案显然更可取,但我相信对您的代码进行的这种小修改也可能有助于理解此机制的工作原理:

function mapDispatchToProps(dispatch) {
    return {
        foo: () => dispatch(function() { // <-- Note the dispatch!
            dispatch(someAction());

            return function asyncAction(dispatch, getState) {
                console.log("An async action!");
                dispatch(someOtherAction(getState().foo));
            };
        }()) // <-- Note the IIFE!
    }
}

foo在此处的原始 thunk 创建函数(与 关联)实际上必须立即被调用dispatch'ed,以便此模式起作用。