Question

我有一个反应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调用吗？

Answer 1

首先，您需要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。

Answer 2

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

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

2 个答案: