Question

我想知道如何在mapDispatchToProps react-redux的{{1}}中使用异步操作创建器。我使用connect中间件，以下是我的redux-thunk：

mapDispatchToProps

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

Answer 1

我建议以不同方式声明您的实际thunk（UITableViewCell）。在以下示例中，someOtherAction是一个异步操作创建者，它返回一个thunk。然后thunk可以调度其他操作（例如，在promise解析之后）。

asyncAction

Answer 2

为完整起见，我将添加它。我需要使用1个动作创建者分派2个动作，但是第二个动作取决于第一个动作的结果。第二个操作还需要访问商店的其他部分，因此我无法使用用于设置第一个值的同一个reducer。

我的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,
                    })
                }
            }
        }
    }
}

通过这种方式，我不需要将商店作为模块导入，而我发现它非常难看。没什么大不了的，只是希望这会有所帮助。

Answer 3

尽管接受的答案显然是更可取的，但我相信对您的代码进行的少量修改也可能有助于了解此机制的工作原理：

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!
    }
}

实际上，必须为您的原始thunk创建功能（与foo相关联）进行immediately invoked和dispatch的编辑，才能使此模式起作用。

在mapDispatchToProps中使用thunk

3 个答案: