javascript - 在 React Flux 中哪里进行 Ajax 调用

Question

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

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

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调用？

Answer 1

首先，您需要 redux-thunk，它让您有机会创建以异步方式分派(dispatch)其他操作的操作。

此后，您可以创建一个调用服务器的操作，并根据结果分派(dispatch)新操作来存储新数据。例如:

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 - 如果一切正常；

• errroDuringRataRetriving - 如果请求失败。

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