СЦЕПЛЕНИЕ обещает с стуком и 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) 

Итак, что я хотел бы сделать, это цепь пара обещает вместе. Документация 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

Это не прямой ответ на ваш вопрос, но вам действительно не нужно использовать пакет redux-promise-middleware. Вы можете просто создать свое собственное промежуточное программное обеспечение для обработки обещаний. Это моя простая реализация 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})) 

Answer 2

Я понял вопрос. Это необходимо было изменить примерно так:

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