Redux传奇功能在第一次尝试时没有运行

Question

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

以下是我如何设置我的观察者。

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));
}
}

Answer 1

这应该有助于

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

也是连接传奇的一个例子

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 };

Answer 2

我使用来自Redux传奇效果的takeLatest()来回答这个问题(其他传奇方法也很好，你应该看看传奇效果，看看哪个效果符合你的用例(你可以在你的传奇方法下添加这个：

export function* loginUser({ payload: { user, history } }) {
...
}
export const authSaga = [
takeLatest(LOGIN_USER, loginUser),
takeLatest(LOGOUT_USER, logoutUser)
]

在你的rootSaga中导入这个传奇故事，或者创建一个，如果你错过了这个：

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

添加这个rootSaga，您可以在其中配置redux存储并应用中间件：

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()的作用是什么？：

在发送到商店的每个动作上生成一个符合模式的传奇故事。如果之前启动的任何传奇任务仍在运行，则会自动取消该任务。

每次将操作发送到商店时。如果这个动作符合模式，takeLatest将在后台启动一个新的传奇任务。如果之前启动了传奇任务(在实际操作之前调度的最后一个操作上(，并且该任务仍在运行，则该任务将被取消。