在React流量中进行Ajax调用的位置

Where to make Ajax calls in React flux

本文关键字：Ajax 调用 位置 React 流量      更新时间：2023-09-26

我有一个react js应用程序，用户可以在其中创建一个用户，然后我向后端发布一个http。

我有一个动作看起来像这个

export function createUser(name, username, password) {
  dispatcher.dispatch({
    type: "CREATE_USER",
    name,
    username,
    password,
  });
}

然后在我的商店里，我调用action，它会触发一个函数，向后端发布一个http帖子，看起来像这个

handleActions(action) {
    switch(action.type) {
     case "CREATE_USER": {
     this.createUser(action.name, action.username, action.password);
      break;
     }
      default:
    }
  }

我应该在商店中调用ajax，还是在它自己的操作中调用ajax？

首先，您需要redux thunk，它可以让您有机会创建以异步方式调度其他操作的操作。

之后，您可以创建一个调用服务器的操作，并在结果分派时创建一个新的操作来存储新数据。例如：

getData(param) {
  return (dispatch) => {
    dispatch(dataRequestAction());
    return fetch(`/data/${param}`)
      .then(r => r.json())
      .then(data => dispatch(setDataAction(data)))
      .catch(err => dispatch(errroDuringRataRetrieving(err)))
    };
}

正如您在这里看到的，您有一个操作（getData），它实际上不会更改存储，而是触发"dataRequestAction"，它放入存储请求启动的数据。然后，如果请求完成，可以触发其中一个操作：

  • setDataAction-如果一切正常；

  • errroDuringRateRetrieving-如果请求失败。

通过这种方式，您可以通过redux处理ajax。

我认为我们应该有一个单独的名为api的文件夹。在那里，我们将有我们所有的api调用。我们可以注入这些文件并调用那些函数，我们将这些函数放在调用api和响应动作的函数所在的位置。

相关文章：