Redux saga 函数在第一次尝试时没有运行答案

【问题标题】：Redux saga function not running on very first tryRedux saga 函数在第一次尝试时没有运行
【发布时间】：2020-09-17 05:29:10
【问题描述】：

所以，每当我启动我的服务器时。我不知道为什么，但我的 saga 功能在登录时不起作用。我已确保该操作正在运行。此外，一旦我重新加载页面，它就会开始工作。

这是我设置观察者的方式。

export function* watchUserLogin() {
  console.log("login");
  yield takeEvery(LOGIN_USER, loginUser);
}

export function* watchUserLogout() {
  yield takeEvery(LOGOUT_USER, logoutUser);
}

function* authSaga() {
  yield all([fork(watchUserLogin), fork(watchUserLogout)]);
}

也是我的主要传奇功能

function* loginUser({ payload: { user, history } }) {
  try {
    console.log("login");
    const response = yield call(Login, user.email, user.password);
    console.log(response, "ah");
    if (response.status >= 200 && response.status < 300) {
      const user = yield response.data;

      sessionStorage.setItem("authUser", JSON.stringify(user));
      console.log(user);
      var decoded = jwt_decode(user.access);
      yield put(loginSuccess(user));
      if (decoded.is_preferences) {
        history.push("/dashboard");
        // const session = yield call(checkSession);
        // console.log(session);
        console.log(sessionStorage.getItem("authUser"));
      } else {
        history.push("/preferences");
        // const session = yield call(checkSession);
        // console.log(session);
      }
    } else {
      throw response;
    }
    yield put(loginSuccess(user));
  } catch (error) {
    console.log(error.response.status);
    yield put(loginFail(error.response.data, error.response.status));
  }
}

【问题讨论】：

希望你已经实例化了 sagaMiddleware 并在 index.js 文件中注册了 sagas。
是的，我已经在 DOM 渲染上面初始化了
我没听懂你。我想您应该导出 authSaga 函数并在“redux-saga”的 createSagaMiddleware 函数中注册，例如 createSagaMiddleware().run(authSaga)。您可以将注册 saga 的代码粘贴到中间件或存储中吗？

标签： reactjs redux react-redux redux-saga

【解决方案1】：

这应该会有所帮助

function* authSaga() {
  yield all([watchUserLogin(), watchUserLogout()]);
}

也是一个连接saga的例子

import createSagaMiddleware from 'redux-saga';
import { createStore, applyMiddleware } from 'redux';

import { rootReducer } from './reducers';
import { rootSaga } from './saga';

const sagaMiddleware = createSagaMiddleware();

const store = createStore(
  rootReducer,
  applyMiddleware(sagaMiddleware),
);

sagaMiddleware.run(rootSaga);

export { store };

【讨论】：

【解决方案2】：

我正在使用来自 Redux-saga 效果的takeLatest() 来回答这个问题（其他 saga 方法也很好，您应该查看 saga 效果以找出与您的用例匹配的效果）您会添加这个在你的传奇方法下：

export function* loginUser({ payload: { user, history } }) {
...
}

export const authSaga = [
 takeLatest(LOGIN_USER, loginUser),
 takeLatest(LOGOUT_USER, logoutUser)
]

在你的 rootSaga 中导入这个 saga，或者如果你缺少这个，就创建一个：

export function* rootSaga() {
    yield all([
        ...authSaga
    ]);
}

在您配置 redux 存储和应用中间件的地方添加这个 rootSaga：

import { createStore, applyMiddleware } from "redux";
import { reducers } from "../core/state";
import { createBrowserHistory } from "history";
import createSagaMiddleware from "redux-saga";
import { routerMiddleware } from "connected-react-router";
import { logger } from 'redux-logger';
import thunk from 'redux-thunk';
import { rootSaga } from "../core/state/rootSaga";
import { composeWithDevTools } from 'redux-devtools-extension';

export const history = createBrowserHistory();

const configureStore = (initialState = {}) => {
  const sagaMiddleware = createSagaMiddleware();
  let middleware = [sagaMiddleware, routerMiddleware(history), thunk]
  const store = createStore(
    reducers(history),
    initialState,
    composeWithDevTools(
      applyMiddleware(...middleware),
    )
  );
  sagaMiddleware.run(rootSaga);
  return store;
};

export default () => configureStore({});

以上代码不需要全部添加，这只是我的一个项目的configStore示例，对于您的情况，请务必在您的配置中添加以下行：

sagaMiddleware.run(rootSaga);

takeLatest() 是做什么的？：

在调度到与模式匹配的 Store 的每个操作上生成一个 saga。如果它仍在运行，则自动取消之前启动的任何以前的 saga 任务。

每次将操作分派到商店时。如果此操作与模式匹配，则 takeLatest 在后台启动一个新的 saga 任务。如果之前启动了一个 saga 任务（在实际操作之前调度的最后一个操作上），并且如果该任务仍在运行，则该任务将被取消。

【讨论】：