Redux-Thunk "アクションはプレーンなオブジェクトでなければなりません。非同期アクションにはカスタムミドルウェアを使用してください。

Question

はサンクミドルウェア

import { createStore, applyMiddleware, compose } from 'redux'; 
import thunk from 'redux-thunk'; 
const store = createStore(
    reducer, 
    initialState, 
    applyMiddleware(thunk) 
); 

そして、私はcomponentDidMount()

componentDidMount(){ 
    this.props.dispatch(
    getArticle('http://api.example.com/') 
); 
} 

に派遣を呼び出すが、エラーを取得しています私の記事コンポーネントで約束

export function getArticle(url) { 
    return function (dispatch) { 
    fetchArticle(url).then( 
     article => dispatch(setArticle(article)), 
    ); 
    }; 
} 

function fetchArticle(url) { 

    return new Promise((resolve, reject) => { 

    request 
    .get(url) 
    .end((err, res) => { 
     if (err || !res.ok) { 
     reject('Oh no! error'); 
     } else { 
     resolve(res.body); 
     } 
    }); 

    }) 
} 

export function setArticle(article){ 
    return { 
    type: constants.SET_ARTICLE, 
    article 
    } 
} 

を呼び出して、私のアクションを作成して私の店の作成： "アクションはプレーンなオブジェクトでなければなりません。非同期アクションにはカスタムミドルウェアを使用してください。"

この設定で何が問題になっていますか？私はcompose(applyMiddleware(thunk))を呼び出すことを試みたが、役に立たなかった。

Answer 1

変更

return function (dispatch) { 
    fetchArticle(url).then( 
     article => dispatch(setArticle(article)), 
    ); 
    }; 

return function (dispatch) { 
    return fetchArticle(url).then( 
     article => dispatch(setArticle(article)), 
    ); 
    }; 

Answer 2

に以下を試してみてください。

export function getArticle(url) { 
    return fetchArticle(url).then( 
     article => dispatch(setArticle(article)), 
    ); 
} 

Answer 3

あなたのコードは、（拒否を約束）エラーを処理する方法を欠けていることを除いて[OK]を探します。あなたのAPIはエラーを返す可能性があり、そのエラーメッセージが表示される可能性があります。それは、ダムに聞こえるが、あなたはReduxの-サンクがインストールされていることを確認し、 `NPMはReduxの-thunk`をインストールすることができ

export function getArticle(url) { 
    return function (dispatch) { 
    fetchArticle(url) 
     .then(article => dispatch(setArticle(article))) 
     .catch(err => dispatch({ type: 'SOME_ERROR', err })); 
    }; 
}