在 React Flux 中进行 Ajax 调用的位置

Posted 2023-02-22

【中文标题】在 React Flux 中进行 Ajax 调用的位置

【英文标题】：Where to make Ajax calls in React flux

【发布时间】：2016-12-05 04:28:35

【问题描述】：

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

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

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

然后在我的商店中，我调用 action 并触发一个函数，该函数将 http post 发送到后端，如下所示

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

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

【参考方案1】：

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

【讨论】：

你的意思是这样的github.com/auth0-blog/react-flux-jwt-authentication-sample/blob/…？

没错。我们遵循类似的。因为它将您的 api 调用从前端分离出来。说你正在使用 mongodb。明天你切换到postgress。然后应该只有项目区域会更改称为 API。其他一切都将保持原样。

【参考方案2】：

首先，您需要 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 - 如果一切正常；

errroDuringRataRetrieving - 如果请求失败。

这样就可以通过redux处理ajax了。