Как ждать завершения отправки с использованием промежуточного программного обеспечения Thunk? - PullRequest
Новая
       8

Как ждать завершения отправки с использованием промежуточного программного обеспечения Thunk?

0 голосов
/ 30 сентября 2018

Я использую 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 не сделан.

1 Ответ

0 голосов
/ 30 сентября 2018

Мне не хватало для отправки saveElements () и возврата отправки (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())
    })
}
...