Question

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

我正在创建一个名为 getMovieSearch 的操作，该操作将返回组件中请求的数据以及进行api调用（api调用文件位于/api/fetchApi）。在将数据提取到api文件后，我将dta传递给名为 getMovieList 的successAction，之后我将其返回到我的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中的成功操作？

1 个答案: