web-dev-qa-db-ja.com

React-Redux：アクションはプレーンなオブジェクトでなければなりません。非同期アクションにカスタムミドルウェアを使用する

未処理の拒否（エラー）：アクションはプレーンオブジェクトである必要があります。非同期アクションにカスタムミドルウェアを使用します。

詳細：すべての投稿にコメントを追加したかった。投稿を取得するときに、すべての投稿に対してコメントコメントAPIを呼び出します。

ここに私のコードがあります：

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

ありがとう

reactjsreact-redux
28
Rajib Ahmed

非同期リクエストの終了後にディスパッチする必要があります。

これはうまくいくでしょう：

export function bindComments(postId) {

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

ミドルウェアなしではアクションでフェッチを使用できません。アクションはプレーンオブジェクトである必要があります。 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));
      })
  }
}
2
Sinapcs

Arrow関数を使用すると、コードの可読性が向上します。 API.fetchCommentsで何も返す必要はありません。リクエストが完了すると、Api呼び出しは非同期になりますthenは応答を取得します。そこではdispatchタイプとデータだけが必要です。

以下のコードは、矢印関数を使用して同じ仕事をします。

export const bindComments = postId => {
  return dispatch => {
    API.fetchComments(postId).then(comments => {
      dispatch({
        type: BIND_COMMENTS,
        comments,
        postId
      });
    });
  };
};
2
Amruth LS