链接承诺与Thunk和承诺中间件

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)

所以，我想做的是把几个承诺连在一起。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')))
            ])
        })
    };
}

但是，当我将它发送到商店时，会得到以下错误：

错误:操作必须是普通对象。使用自定义中间件进行异步操作。

我配置错了什么？

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
                    }
                })
            ])
        })
    };
}

Answer 2

--这并不是对您的问题的直接回答，但是您实际上并不需要使用redux-promise-middleware包。您可以简单地创建自己的中间件来处理承诺。这是我对承诺中间件的简单实现：

export default function PromiseMiddleware() {
   return (next) => (action) => {
      const {promise, type, ...rest} = action

      if (!promise) return next(action)

      const REQUEST = type + '_REQUEST'
      const SUCCESS = type + '_SUCCESS'
      const FAILURE = type + '_FAILURE'

      next({...rest, type: REQUEST})

      return promise
         .then(result => {

            next({...rest, result, type: SUCCESS})

            return true
         })
         .catch(error => {
            if (DEBUG) {
               console.error(error)
               console.log(error.stack)
            }
            next({...rest, error, type: FAILURE})

            return false
         })
   }
}

你可以像你所做的那样应用它：

const middleware = applyMiddleware(thunk, PromiseMiddleware, logger({diff: true}))