首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当登录成功时如何在redux saga中路由跳转?

在Redux Saga中实现登录成功后的路由跳转,可以通过以下步骤:

  1. 首先,在Redux Saga中监听登录成功的action。可以使用takeEverytakeLatest等effect来监听登录成功的action,例如:
代码语言:txt
复制
import { takeEvery } from 'redux-saga/effects';
import { LOGIN_SUCCESS } from '../actions/types';

function* watchLoginSuccess() {
  yield takeEvery(LOGIN_SUCCESS, redirectToDashboard);
}
  1. redirectToDashboard函数中,使用history对象进行路由跳转。可以使用react-router-dom库中的history对象,或者自定义的路由管理工具。例如:
代码语言:txt
复制
import { push } from 'connected-react-router';

function* redirectToDashboard() {
  yield put(push('/dashboard'));
}

这里使用了connected-react-router库提供的push方法来进行路由跳转,将用户导航到'/dashboard'页面。

  1. 在Redux Store中配置路由相关的设置。使用connected-react-router库来将路由状态与Redux Store进行关联。例如:
代码语言:txt
复制
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'页面。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的视频

领券