Redux-thunk async Aktionen: Verwenden Sie benutzerdefinierte Middleware für asynchrone Aktionen

Question

Ich verwende redux-thunk für asynchrone Aktionen und babel-polyfill für Versprechen. Ich erhalte den folgenden Fehler: Error: Actions must be plain objects. Use custom middleware for async actions.

Ich löste dieses Problem, indem ich redux-promise in meine Middleware einfügte. Ich bin nicht sicher, warum ich redux-promise verwenden musste, um dieses Problem zu beheben, da alle Beispiele in Reduxdokumenten babel-polyfill verwenden. Sollte ich weiterhin redux-promise verwenden oder habe ich einige Probleme mit babel-polyfill?

babel-polyfill ist in meiner app Einstiegspunkt enthalten:

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:

So überprüfte ich nur für den Fall, wenn ich redux-thunk installiert haben. Es ist in meinem Paket.json. Hier ist meine store.js

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

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

Hier ist meine Asynchron-Aktion in 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))); 
} 

Hier ist, wie ich Wirkung von Komponente aufrufen:

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

Und schließlich diese ist mein Reduzierer:

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

Answer 1

Es klingt so wie du es noch nicht installiert hast/setup redux-thunk.

Sie das NPM-Paket in der üblichen Weise installieren:

npm install --save redux-thunk 

Und hier ist ein Beispiel für die Anwendung der 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

Ich denke, Ihre Fehler könnte verursacht werden durch:

1. Sie sind nicht eine Thunk (eine Funktion, die eine Funktion der Absendung) von Ihrer Aktion Schöpfer zurückkehren, so dass die Thunk-Middleware nicht verfängt (vielleicht sind Sie ein Versprechen der Rückkehr statt?)
2. Sie haben nicht installiert redux-thunk von Dženo vorgeschlagen als

ich schlage vor, dass Sie die Redux-Logger-Middleware installieren und zu Ihrem Geschäft Middle als das letzte hinzufügen, das Versprechen Middleware zu entfernen, die Sie nicht brauchen würde, wenn ein Thunk zurückkehrt. Auf diese Weise werden alle Aktionen in der Konsole protokolliert (vorheriger Status, aktuelle Aktion, nächster Status) und Sie können debuggen, welchen Aktionsobjekttyp Sie zurückgeben, der nicht von der Thunk-Middleware "verdaut" wird.