react+redux 中如何通过request action 处理中间件并触发success action？

Question

我正在通过使用 reactJS+redux 的电影取景器应用程序学习 ReactJS。我将我的 github 存储库放在这里：https://github.com/ajay28kumar/redux-omdb-movieFind.git

我正在创建一个名为 getMovieSearch 的操作，它将 return 组件中请求的数据并进行 api 调用（api 调用文件在 /api/fetchApi 中）。将数据提取到 api 文件后，我将该 dta 传递给名为 getMovieList 的 successAction，然后我将 return 将相同的数据传递到我的 reducer 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
    };
};

它将转到我的中间件并且工作正常，但我想为我的学习应用程序单独执行 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)))
};

react+redux 中如何通过request action 处理中间件并触发success action？

how to handle middleware by request action and trigger success action in react+redux?

javascript

flux

reactjs

redux

react-redux