どのようにミドルウェアをリクエストアクションで処理し、react + reduxで成功アクションをトリガするのですか？

Question

私はreactJS + reduxを使って映画ファインダーアプリでReactJSを学んでいます。私はここに私のGitHubのレポを入れています：私はコンポーネントに要求されたデータを返すだけでなく、APIコール（API呼び出しファイルが/api/fetchApiである）ようになりますgetMovieSearchと呼ばつのアクションを作成していhttps://github.com/ajay28kumar/redux-omdb-movieFind.git

。データをAPIファイルにフェッチした後、私はsuccessActionにgetMovieListという名前を渡しています。その後、私はそれを私のレデューサーに返しますmovieGetReducer。これらの手順はすべて正常に動作していますが、私の店は更新されていません。

私はgetMovieSearchを呼び出し、次のようになりますつの代替ソリューションました：

export var getMovieSearch = (payload) => { 
    const request= axios.get("http://www.omdbapi.com/?t="+ payload+ "&page=1"); 
    console.log("data from api :", request) 
    return { 
     type: 'GET_MOVIE_LIST', 
     payload: request 
    }; 
}; 

それは私のミドルウェアに行くと、正常に動作しますが、私は私のために要求/ successResponse /はErrorResponseのアクションを区切るしたいさを学習アプリ。

誰かが同じものを修正できるなら、それは素晴らしいでしょう。

ありがとうございました。

Answer 1

redux-thunkを使用できます。非同期アクションの一般的なパターンは、リクエスト、受信（成功）、失敗の3つのアクションを作成することです。

例：あなたが非同期的にデータをフェッチするために使用されているミドルウェア

export var getMovieSearch = (payload) => (dispatch) => { 
    dispatch(requestMovieList(payload)); 
    axios.get("http://www.omdbapi.com/?t=" + payload + "&page=1") 
    .then(res => dispatch(receiveMovieList(res.data))) 
    .catch(err => dispatch(getMovieListFailed(err))) 
};