未知（約束）エラー：アクションはプレーンなオブジェクトでなければなりません。非同期アクションにカスタムミドルウェアを使用する

Question

私はReduxをreactjs.jpに統合しようとしていますが、devツールで次のエラーメッセージが見つかりました。これは正確に分かりますが、どうすれば解決できるでしょうか？

Uncaught (in promise) Error: Actions must be plain objects. Use custom middleware for async actions. 
    at dispatch (createStore.js:158) 
    at eval (middleware.js:22) 
    at eval (middleware.js:67) 
    at Object.eval [as callApi] (bindActionCreators.js:5) 
    at HomePage.componentDidMount (eval at ./app/containers/HomePage/index.js (0.chunk.js:154), <anonymous>:101:28) 
    at HomePage.proxiedComponentDidMount (eval at ./node_modules/react-proxy/modules/createPrototypeProxy.js (0.chunk.js:943), <anonymous>:61:40) 
    at eval (ReactCompositeComponent.js:265) 
    at measureLifeCyclePerf (ReactCompositeComponent.js:75) 
    at eval (ReactCompositeComponent.js:264) 
    at CallbackQueue.notifyAll (CallbackQueue.js:76) 

Answer 1

ディスパッチ機能では、デフォルトではサポートされていない関数を渡していると思います。あなたはそのようなことをしたい場合、あなたはサンクミドルウェアを使用する必要があります。

import {createStore, compose, applyMiddleware} from 'redux'; 
import thunk from 'redux-thunk'; 
import rootReducer from '../reducers'; 

function configureStoreProd(initialState) { 
    const middlewares = [ 
    // Add other middleware on this line... 

    // thunk middleware can also accept an extra argument to be passed to each thunk action 
    // https://github.com/gaearon/redux-thunk#injecting-a-custom-argument 
    thunk, 
    ]; 

    return createStore(rootReducer, initialState, compose(
     applyMiddleware(...middlewares) 
    ) 
); 
}