Redux-thunk非同期アクション：非同期アクションにはカスタムミドルウェアを使用します

Question

私は非同期アクションにはredux-thunk、約束にはbabel-polyfillを使用しています。次のエラーが表示されます。redux-promiseをミドルウェアに含めることでこの問題を解決しました。 Reduxのすべての例でbabel-polyfillを使用しているため、なぜこの問題を解決するためにredux-promiseを使用しなければならないのか分かりません。 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をインストールしているのであれば、私は念のために確認。それは私のpackage.jsonにあります。ここaction.jsの私の非同期動作である。ここに私store.js

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

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

である：ここでは

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ミドルウェア

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ミドルウェアがそれを捕まえないように、あなたのアクションクリエータからサンク（ディスパッチの関数を返す関数）を返さないでください（代わりに約束を返しているかもしれません）
2. dzeno

により示唆されるようにReduxの-サンクインストール私はあなたがReduxのロガーミドルウェアをインストールし、サンクを返す場合は、必要はありません約束ミドルウェアを削除、最後の一つとして、お店のミドルウェアに追加することを示唆しています。 このようにして、すべてのアクションはコンソール（以前の状態、現在のアクション、次の状態）に記録され、サンクミドルウェアによって "消化されていない"戻りたいアクションオブジェクトタイプをデバッグできます。