2017-10-16 18 views
1

未処理の拒否(エラー):アクションはプレーンなオブジェクトでなければなりません。非同期アクションにはカスタムミドルウェアを使用します。React-Redux:アクションはプレーンなオブジェクトでなければなりません。非同期アクションにカスタムミドルウェアを使用する

詳細:すべての投稿でコメントを追加したいと考えていました。だから、フェッチ・ポストが実行されるとき、私はすべてのポストのためにfetch comment APIをコールしたいと思う。

export function bindComments(postId) { 
    return API.fetchComments(postId).then(comments => { 
    return { 
     type: BIND_COMMENTS, 
     comments, 
     postId 
    } 
    }) 
} 

おかげ

答えて

0

ansycリクエストが終了した後に発送します。

これは動作します:

export function bindComments(postId) { 

return function (dispatch){ 
    return API.fetchComments(postId).then(comments => { 
    // dispatch 
    dispatch({ 
     type: BIND_COMMENTS, 
     comments, 
     postId 
    }) 
    }) 
} 
} 
+0

それは魅力のように働いた。ありがとう –

2

あなたはミドルウェアなしでアクションでフェッチを使用することはできません。

は、ここに私のコードです。アクションは普通のオブジェクトでなければなりません。あなたは、redux-thunkやredux-sagaのようなミドルウェアを使ってフェッチし、別のアクションをディスパッチできます。

ここでは、redux-thunkミドルウェアを使用した非同期アクションの例を示します。

export function checkUserLoggedIn (authCode) { 
let url = `${loginUrl}validate?auth_code=${authCode}`; 
    return dispatch => { 
    return fetch(url,{ 
     method: 'GET', 
     headers: { 
     "Content-Type": "application/json" 
     } 
     } 
    ) 
     .then((resp) => { 
     let json = resp.json(); 
     if (resp.status >= 200 && resp.status < 300) { 
      return json; 
     } else { 
      return json.then(Promise.reject.bind(Promise)); 
     } 
     }) 
     .then(
     json => { 
      if (json.result && (json.result.status === 'error')) { 
      dispatch(errorOccurred(json.result)); 
      dispatch(logOut()); 
      } 
      else{ 
      dispatch(verified(json.result)); 
      } 
     } 
    ) 
     .catch((error) => { 
     dispatch(warningOccurred(error, url)); 
     }) 
    } 
} 
+0

を私はすでに、私はあなたがミドルウェアを使用していないと思っ –

+0

申し訳Reduxの-サンクを使用していました。 @sadiqがそれを言及したのはそこにディスパッチ問題だった。 – SNT

関連する問題

 関連する問題