Question

我正在使用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调用。

Answer 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())
    })
}

如何使用thunk中间件等待分发完成？

1 个答案: