使用redux saga的异步api调用

Api.fetchUser 是一个函数,应该在哪里执行api ajax调用,它应该返回promise。

在您的情况下,这个承诺应该解决用户数据变量。

例如:

// services/api.js
export function fetchUser(userId) {
  // `axios` function returns promise, you can use any ajax lib, which can
  // return promise, or wrap in promise ajax call
  return axios.get('/api/user/' + userId);
};

然后是传奇:

function* fetchUserSaga(action) {
  // `call` function accepts rest arguments, which will be passed to `api.fetchUser` function.
  // Instructing middleware to call promise, it resolved value will be assigned to `userData` variable
  const userData = yield call(api.fetchUser, action.userId);
  // Instructing middleware to dispatch corresponding action.
  yield put({
    type: 'FETCH_USER_SUCCESS',
    userData
  });
}

call , put 是效果创造者的功能。他们不熟悉 GET 或 POST 请求。

函数用于创建效果描述,它指示中间件调用promise。 放 函数创建效果,其中指示中间件将操作发送到存储。

call , put , take , race Api.fetchUser 是您自己处理API请求的函数的占位符。

下面是登录Saga的完整示例:

export function* loginUserSaga() {
  while (true) {
    const watcher = yield race({
      loginUser: take(USER_LOGIN),
      stop: take(LOCATION_CHANGE),
    });

    if (watcher.stop) break;

    const {loginUser} = watcher || {};
    const {username, password} = loginUser || {};
    const data = {username, password};

    const login = yield call(SessionService.login, data);

    if (login.err === undefined || login.err === null && login.response) {
      yield put(loginSuccess(login.response));
    } else {
      yield put(loginError({message: 'Invalid credentials. Please try again.'}));
    }
  }
}

在此代码段中 SessionService 是实现 login 方法来处理对API的HTTP请求。雷杜克斯传奇 将调用此方法并对其应用数据参数。在上面的片段中,我们可以评估调用和分派的结果 loginSuccess 或 loginError 相应操作使用 放 .

附带说明:上面的代码片段是一个loginSaga,它持续侦听 USER_LOGIN 事件,但当 LOCATION_CHANGE 发生。这要感谢 比赛 效果创建者。