Redux-thunk async действия: используйте специальное промежуточное программное обеспечение для асинхронных действий

Question

Я использую redux-thunk для асинхронных действий и babel-polyfill для обещаний. Я получаю следующую ошибку: Error: Actions must be plain objects. Use custom middleware for async actions.

Я решил эту проблему, включив в мое промежуточное программное обеспечение redux-promise. Я не уверен, почему мне пришлось использовать redux-promise для решения этой проблемы, потому что все примеры в документах Redux используют babel-polyfill. Должен ли я продолжать использовать redux-promise или у меня могут возникнуть проблемы с babel-polyfill?

babel-polyfill входит в мое приложение точки входа:

import 'babel-polyfill'; 

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Provider } from 'react-redux'; 

import App from './components/App.jsx'; 
import store from './store.jsx'; 

ReactDOM.render(
    <Provider store={store}> 
     <App /> 
    </Provider> 
    , document.querySelector('.container')); 

---

UPDATE:

Так что я проверил только в том случае, если я установил redux-thunk. Это в моем пакете.json. Вот мой store.js

import thunkMiddleware from 'redux-thunk'; 
import promise from 'redux-promise' 

export default store = createStore(
    rootReducer, 
    defaultState, 
    applyMiddleware(
    thunkMiddleware, 
    promise 
) 
); 

Вот мое асинхронное действие в action.js:

function receiveStates(json) { 
    return { 
     type: RECEIVE_STATES, 
     states: json.states, 
    }; 
} 

export function fetchStates(uuid) { 
    return dispatch => 
     fetch(`https://my-api.com/session/${uuid}`) 
     .then(response => response.json()) 
     .then(json => dispatch(receiveStates(json))); 
} 

Вот как я называю действие от компонента:

fetchStates(sessionID) { 
    this.props.dispatch(fetchStates(sessionID)); 
} 
# I bind this function in component's constructor 
this.fetchStates = this.fetchStates.bind(this); 

И, наконец, это мой редуктор:

function statesReducer(state = null, action) { 
    switch (action.type) { 
     case RECEIVE_STATES: 
      return { ...state, states: action.states }; 
     default: 
      return state; 
    } 
} 

Answer 1

Это звучит как вы еще не установили/установили redux-thunk.

Вы установите пакет NPM обычным способом:

npm install --save redux-thunk 

А вот пример применения redux-thunk MiddleWare

getStore.js

import { createStore, applyMiddleware } from 'redux' 
import thunk from 'redux-thunk' 

const getStore = ({combined, initial}) =>{ 
    var store = createStore(combined, initial, applyMiddleware(thunk)) 
    return store 
} 

export{ 
    getStore 
} 

Answer 2

Я думаю, что ваш ошибка может быть вызвана:

1. Вы не возвращаете thunk (функцию, возвращающую функцию отправки) от вашего создателя действия, так что промежуточное ПО Thunk его не улавливает (возможно, вместо этого вы возвращаете обещание?)
2. У вас нет установлен перевождь-санк как предложено dzeno

Я предлагаю вам установить перевождь-регистратор промежуточного уровня и добавить его в ваш магазин промежуточное программное как последний, удаляя обещание промежуточное программное обеспечение, которое вам не нужно будет, если возвращающая преобразователь,. Таким образом, все действия регистрируются на консоли (предыдущее состояние, текущее действие, следующее состояние), и вы можете отлаживать возвращаемый тип объекта действия, который не переваривается промежуточным программным обеспечением thunk.