Redux-saga 不能在 promise 中使用生成器函数？

Question

我是 redux-saga 的新手。目前我正在研究一个简单的登录示例。看看这些函数：

function sendLoginRequest(data) {
  const headers = { 'Accept': 'application/json' };
  const url = LOGIN_URL;
  const serialize = new FormData(data.event.target);
  const loginData = {
    username: serialize.get('email'),
    password: serialize.get('password'),
    client_secret: APP_SECRET_KEY,
    client_id: APP_SECRET_ID,
    grant_type: PASSWORD_GRANT_TYPE,
    scope: '*',
  }

  return axios({
    method: 'POST',
    url: url,
    data: loginData,
    headers: headers,
  });
}

export function* loginRequest(data) {
  yield takeLatest(LOGIN_REQUEST, data => {
    const response = sendLoginRequest(data);
    console.log(response);
    response
      .then(function* (data) {
        console.log(data);
        yield put(LOGIN_SUCCESS, data.data);
      })
      .catch(function* (err) {
        console.log(err);
        yield put(LOGIN_FAILURE, err.response);
      });
  });
}

如果我运行像这样的中间件，那就完美了：

const sagaMiddleware = createSagaMiddleware();
const store = createStore(
  rootReducer,
  applyMiddleware(sagaMiddleware)
);
sagaMiddleware.run(loginRequest);

但后来我添加了一个新的 rootSaga:

export default function* rootSaga() {
    yield all([
        fork(loginRequest),
        fork(loginSuccess),
    fork(loginFailure)
    ]);
}

我运行 rootSaga 而不是 loginRequest saga:

const sagaMiddleware = createSagaMiddleware();
const store = createStore(
  rootReducer,
  applyMiddleware(sagaMiddleware)
);
sagaMiddleware.run(rootSaga);

现在这些新代码根本不起作用。当我尝试在 loginRequest 生成器函数中使用 console.log(response); 时，显示承诺已解决。而且它不会运行 then-catch。

谁能帮我解决这个问题？谢谢~

Answer 1

请试试这个：

export function* loginRequest(data) {
  yield takeLatest(LOGIN_REQUEST, data => {
    const response = yield call(sendLoginRequest, data);

    if (response.status >= 200 && response.status < 300) {
        yield put(LOGIN_SUCCESS, data.data);
        return;
    }
    yield put(LOGIN_FAILURE, err.response);
  });
}

需要注意的是sendLoginRequestreturns一个承诺。 redux-saga 旨在使用承诺 而无需 使用 .then()。您可以 yield call() 任何 returns promise 并且 redux-saga 将在执行下一行代码之前等待 promise 解决的函数。

Redux-saga 不能在 promise 中使用生成器函数？

Redux-saga cannot use generator function inside promise?

javascript

reactjs

redux-saga