javascript - 使用 Thunk 和 Promise 中间件链接 Promise

Question

我同时使用 redux-promise-middleware 和 redux-thunk，如下所示:

import { applyMiddleware, compose, createStore } from 'redux'

import thunk from 'redux-thunk';
import promise from 'redux-promise-middleware'
import logger from 'redux-logger'

import reducer from './reducers'

const middleware = applyMiddleware(thunk, promise(), logger({diff: true}));
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const enhancer = composeEnhancers(middleware);

export default createStore(
    reducer,
    enhancer)

所以，我想做的是将几个 promise 链接在一起。 redux-promise-middleware 文档建议使用 Promise.all，如下所示:

export function startTest(test) {
    return dispatch => {
        return dispatch({
            type: START_TEST,
            id: test,
            payload: Promise.all([
                dispatch(axios.post(urlJoin(config.portalUrl, 'account/login')))
            ])
        })
    };
}

但是，当我将其发送到商店时，我收到以下错误:

Error: Actions must be plain objects. Use custom middleware for async actions.

我配置错了什么？

Answer 1

我发现了这个问题。它需要更改为这样的内容:

export function startTest(test) {
    return dispatch => {
        return dispatch({
            type: START_TEST_THUNK,
            payload: Promise.all([
                dispatch({
                    type: START_TEST,
                    payload: axios.post(urlJoin(config.portalUrl, 'account/login')),
                    meta: {
                        id: test
                    }
                })
            ])
        })
    };
}