Question

我正在尝试将redux-saga引入已经使用redux的react应用程序中。我的第一个目标是在用户尝试登录时引入传奇。

登录表单将调度“ USER_LOGIN_REQUEST”，传奇的职责是调用后端，然后在完成时调度“ USERS_LOGIN_SUCCESS”。我可以看到'USER_LOGIN_REQUEST'是Redux开发工具，但不是'USERS_LOGIN_SUCCESS'。

我在控制台日志中没有看到任何错误，并且调试器没有中断。知道为什么它不起作用吗？

store.js

import { combineReducers, createStore, applyMiddleware } from 'redux'
import * as Reducers from './reducers'
import { composeWithDevTools } from 'redux-devtools-extension';
import createSagaMiddleware from 'redux-saga'
import rootSaga from './sagas'

const rootReducer = combineReducers({
    login: Reducers.loginReducer
})

const sagaMiddleware = createSagaMiddleware();

export default createStore(
  rootReducer,
  composeWithDevTools(
    applyMiddleware(sagaMiddleware)
  )
)

sagaMiddleware.run(rootSaga);

rootSaga.js

import { all, call, delay, spawn } from 'redux-saga/effects'
import { userLoginRequestSaga } from "./loginSaga";

const makeRestartable = (saga) => {
    return function* () {
      yield spawn(function* () {
        while (true) {
          try {
            yield call(saga);
            console.error("unexpected root saga termination. The root sagas are supposed to be sagas that live during the whole app lifetime!",saga);
          } catch (e) {
            console.error("Saga error, the saga will be restarted",e);
          }
          yield delay(1000); // Avoid infinite failures blocking app TODO use backoff retry policy...
        }
      })
    };
};

const sagas = [
    userLoginRequestSaga
].map(makeRestartable);

export default function* rootSaga() {
    yield sagas.map(saga => call(saga));
}

loginSaga.js

import { call, delay, spawn, put, takeEvery } from 'redux-saga/effects'

export function* getLoginDetails() {
  //yield delay(100)
  yield put({ type: 'USERS_LOGIN_SUCCESS' })
}

export function* userLoginRequestSaga() {
  yield takeEvery('USER_LOGIN_REQUEST', getLoginDetails)
}

package.json

{
  "name": "MyApp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.5",
    "react-dom": "^16.8.5",
    "react-redux": "^6.0.1",
    "react-router-dom": "^5.0.0",
    "react-scripts": "2.1.8",
    "redux": "^4.0.1",
    "redux-actions": "^2.6.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-saga": "^1.0.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

感谢您的帮助。

Answer 1

我认为在redux-saga的v1版本中不建议执行效果数组。

尝试替换yield sagas.map(saga => call(saga));

与yield all(sagas.map(saga => call(saga)));

Redux-Saga无法运行

1 个答案: