Question

我正在尝试在我的create-react-app项目中设置Redux-Saga。我正在关注一个教程，但是以某种方式调度的操作不会触发Redux-Saga观察程序。这是一种登录功能，无需先集成API（只是想让我了解Redux-Saga的工作原理）。

这是我的登录操作的摘要

export const userLogin = (username) => ({
    type: USER_LOGIN,
    payload: {username},
});

这里有我的loginSaga的副本

import { take } from 'redux-saga/effects';
import { USER_LOGIN } from '../utils/constants';


function* handleUserLogin(action){
    console.log('action: ', action);
}

export default function* watchUserLogin(){
    yield take(USER_LOGIN, handleUserLogin);
}

这是我的rootSaga

import { all } from 'redux-saga/effects';

import loginSaga from '../components/Login/saga/loginSaga';

export default function* rootSaga() {
    yield all([loginSaga()]);
}

这就是我将其应用于商店的方式

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

import rootSaga from '../sagas';

import rootReducer from '../reducers';

const configureStore = () => {
    const sagaMiddleware = createSagaMiddleware();
    const store = createStore(
        rootReducer,
        window.__REDUX_DEVTOOLS_EXTENSION__ ?
            compose(
                applyMiddleware(sagaMiddleware),
                window.__REDUX_DEVTOOLS_EXTENSION__(),
            ) : applyMiddleware(sagaMiddleware),
    );
    sagaMiddleware.run(rootSaga);
    return store;
};

export default configureStore;

我没有在handleUserLogin（）上获得控制台日志。让我知道我做错了什么。谢谢！

Answer 1

您需要将传奇故事包装在while(true)中才能使其运行。否则，它仅等待第一个动作，然后结束生成器。您也可以改用takeEvery或takeLatest。

export default function* watchUserLogin() {
  while (true) {
    yield take(USER_LOGIN, handleUserLogin);
  }
}

Answer 2

“ takeEvery”怎么样？


import { takeEvery} from 'redux-saga/effects';

export default function* watchUserLogin() {

    yield takeEvery(USER_LOGIN, handleUserLogin);

}

Redux Saga观察者未得到调度

2 个答案: