Akcje asynchroniczne programu Redux-Thunk: Użyj niestandardowego oprogramowania pośredniego dla akcji asynchronicznych

Question

Używam akcji redux-thunk dla asynchronicznych akcji i babel-polyfill dla obietnic. Pojawia się następujący błąd: Error: Actions must be plain objects. Use custom middleware for async actions.

Rozwiązałem ten problem, włączając do mojego oprogramowania pośredniego redux-promise. Nie jestem pewien, dlaczego musiałem użyć redux-promise, aby rozwiązać ten problem, ponieważ wszystkie przykłady w dokumentach Redux używają babel-polyfill. Czy powinienem nadal używać redux-promise, czy też mogę mieć problemy z babel-polyfill?

babel-polyfill jest wliczone w moim app punktu wejścia:

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:

Więc sprawdziłem na wszelki wypadek jeśli mam zainstalowane redux-thunk. Jest w moim package.json. Oto moje store.js

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

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

tutaj jest moja akcja asynchroniczny w 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))); 
} 

Oto jak zadzwonię akcję z części:

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

I wreszcie, to to mój reduktor:

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

Answer 1

To brzmi jak jeszcze nie zainstalowałeś/skonfigurowałeś redux-thunk.

zainstalować pakiet npm w zwykły sposób:

npm install --save redux-thunk 

I tu jest przykładem nakładania 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

myślę, że błąd mógł być spowodowany przez:

1. Nie jesteś przekazujących thunk (funkcję powracającego funkcję wysyłki) od twórcy akcji, tak że middleware Thunk nie złapać go (może wracasz obietnicę w zamian?)
2. Nie ma zainstalowany Redux-pomyślał jak sugeruje dzeno

Sugeruję, aby zainstalować oprogramowanie pośredniczące Redux-logger i dodać go do swoich middleware sklepowych jako ostatni, usuwając middleware obietnica, którą byś nie potrzeba jeśli przekazujących thunk. W ten sposób wszystkie akcje są rejestrowane w konsoli (poprzedni stan, bieżąca akcja, następny stan) i można debugować, jaki typ obiektu powraca, który nie jest "trawiony" przez thunk middleware.