在Redux Saga中实现登录成功后的路由跳转,可以通过以下步骤:
takeEvery
或takeLatest
等effect来监听登录成功的action,例如:import { takeEvery } from 'redux-saga/effects';
import { LOGIN_SUCCESS } from '../actions/types';
function* watchLoginSuccess() {
yield takeEvery(LOGIN_SUCCESS, redirectToDashboard);
}
redirectToDashboard
函数中,使用history
对象进行路由跳转。可以使用react-router-dom
库中的history
对象,或者自定义的路由管理工具。例如:import { push } from 'connected-react-router';
function* redirectToDashboard() {
yield put(push('/dashboard'));
}
这里使用了connected-react-router
库提供的push
方法来进行路由跳转,将用户导航到'/dashboard'页面。
connected-react-router
库来将路由状态与Redux Store进行关联。例如:import { createBrowserHistory } from 'history';
import { createStore, applyMiddleware } from 'redux';
import { routerMiddleware } from 'connected-react-router';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './reducers';
import rootSaga from './sagas';
const history = createBrowserHistory();
const sagaMiddleware = createSagaMiddleware();
const store = createStore(
rootReducer(history),
applyMiddleware(routerMiddleware(history), sagaMiddleware)
);
sagaMiddleware.run(rootSaga);
这里使用了createBrowserHistory
来创建浏览器历史记录对象,并将其与Redux Store进行关联。
通过以上步骤,当登录成功时,Redux Saga会监听到登录成功的action,并在redirectToDashboard
函数中执行路由跳转操作,将用户导航到'/dashboard'页面。
领取专属 10元无门槛券
手把手带您无忧上云