如何使用 thunk 中间件等待调度完成？答案

【问题标题】：How to wait for dispatch to complete using thunk middleware?如何使用 thunk 中间件等待调度完成？
【发布时间】：2019-03-05 22:38:13
【问题描述】：

我正在使用 redux-thunk 并希望调度一个动作，一旦完成，就使用该更新存储的一部分进行 api 调用。

store.js

const middleware = composeEnhancers(applyMiddleware(promise(), thunk, logger()))
const localStore = loadStore()
const store = createStore(reducer, localStore, middleware)

graphActions.js：

首先添加一个元素：

export function addElement(element) {
    return dispatch => {
        dispatch({
            type: ADD_ELEMENT,
            payload: element
        })
    }
}

然后通过不同的动作创建者进行 api 调用：

export function saveElements() {
    return (dispatch, getState) => {
        let graphId = getState().elements.id
        let elements = getState().elements.elements

        axios.put(Config.config.url + '/graph/' + graphId, {
            'data': JSON.stringify({elements: elements}),
        }).then(() => {
            dispatch({type: SHOW_SUCCESS_SNACKBAR})
        }).catch((err) => {
            dispatch({type: SHOW_ERROR_SNACKBAR})
            dispatch({type: UPDATE_ELEMENTS_REJECTED, payload: err})
        })
    }
}

我需要确保 addElement() 在 saveElements() 之前完成，以便 saveElements() 访问更新的存储。我尝试了以下方法：

export function addElement(element) {
    const promise = (dispatch) => new Promise((resolve) => {
        dispatch({
            type: ADD_ELEMENT,
            payload: element
        })
        resolve()
    })

    return dispatch => {
        promise(dispatch).then(() => {
            saveElements()
        })
    }
}

ADD_ELEMENT 已调度，但 saveElements() 中的操作未调度，不进行 api 调用。

【问题讨论】：

尝试至少在 addElement 中返回 promise 以在其他地方使用它
@AlexanderStaroselsky 不幸的是，返回 promise(dispatch).then... 没有帮助
这不是承诺，您需要返回承诺和内部值，否则您无法链接它。使用花括号语法时需要显式返回所有片段。
谢谢，我也错过了发送 saveElements()。

标签： reactjs redux redux-thunk

【解决方案1】：

我错过了调度 saveElements() 并返回 dispatch(saveElements())。

export function addElement(element) {
    const promise = (dispatch) => new Promise((resolve) => {
        dispatch({
            type: ADD_ELEMENT,
            payload: element
        })
        resolve()
    })

    return (dispatch) => {
        return addElements(dispatch).then(() => {
            return dispatch(saveElements())
    })
}

更新：

注意到我可以简单地做到：

export function addElement(element)
    return (dispatch) => {
        dispatch({
            type: ADD_ELEMENT,
            payload: element
        })

        dispatch(saveElements())
    })
}

【讨论】：