react+redux 中如何通过请求动作处理中间件并触发成功动作？

Posted 2023-02-22

【中文标题】react+redux 中如何通过请求动作处理中间件并触发成功动作？

【英文标题】：how to handle middleware by request action and trigger success action in react+redux?

【发布时间】：2017-09-09 08:13:50

【问题描述】：

我正在通过一个使用 reactJS+redux 的电影查找应用程序来学习 ReactJS。我把我的 github 仓库放在这里：https://github.com/ajay28kumar/redux-omdb-movieFind.git

我正在创建一个名为 getMovieSearch 的操作，它将在组件中返回请求的数据并进行 api 调用（api 调用文件在 /api/fetchApi 中）。将数据提取到 api 文件后，我将该 dta 传递给名为 getMovieList 的 successAction，然后将其返回到我的减速器 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 单独操作。

如果有人能纠正同样的问题，那就太好了。

谢谢。

【问题讨论】：

您使用哪个中间件来异步获取数据？

【参考方案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)))
;