首页
学习
活动
专区
工具
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'页面。

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

相关·内容

redux-saga

这些 state 可能包括服务器响应、缓存数据、本地生成尚未持久化到服务器的数据,也包括 UI 状态,激活的路由,被选中的标签,是否显示加载动效或者分页器等等。...系统变得错综复杂的时候,想重现问题或者添加新功能就会变得举步维艰。 如果这还不够糟糕,考虑一些来自前端开发领域的新需求,更新调优、服务端渲染、路由跳转前请求数据等等。...一些库 React 试图在视图层禁止异步和直接操作 DOM 来解决这个问题。美中不足的是,React 依旧把处理 state 数据的问题留给了你。Redux 就是为了帮你解决这个问题。...Redux-Saga 官网地址(英文):https://redux-saga.js.org/ 中文文档地址:https://redux-saga-in-chinese.js.org/ 我简单进行入门了一下...,编写了一个redux-saga的getting start demo https://gitee.com/VampireAchao/simple-redux-saga.git 注释都写得比较完善 运行方式

54110

Taro 小程序开发大型实战(六):尝鲜微信小程序云(上篇)

UI 组件库[2]:我们用 Taro 自带的路由功能实现了多页面跳转,并用 Taro UI 组件库升级了应用界面 实现微信和支付宝多端登录[3]:实现了微信、支付宝以及普通登录和退出登录 使用 Hooks...接着如果登录成功,我们将登录成功的 user 缓存到 storage 里面。...,SET_IS_OPENED,SET_LOGIN_INFO,代表更新登录成功的状态,关闭登录框,设置登录信息到 Redux Store 。...适配异步 action 的 reducer 我们在前面处理登录,在组件内部 dispatch 了 LOGIN action,在处理异步 action 的 saga 函数,使用 put 发起了一系列更新...isLogin:用于标志登录过程是否在执行登录逻辑,true 表示正在执行登录,false 表示登录逻辑执行完毕 loginStatus:用于标志登录过程的状态:开始登录(LOGIN)、登录成功

2.2K20
  • 美团前端react面试题汇总

    页面没使用服务渲染,请求页面,返回的body里为空,之后执行js将html结构注入到body里,结合css显示出来;SSR的优势:对SEO友好所有的模版、图片等资源都存在服务器端一个html返回所有数据减少...该action的函数体会自动执行 store.dispatch(action)}(2)使用redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js ...那需要做的只是: 当路由改变,根据路由,也去请求数据:class NewsList extends Component { componentDidMount () { this.fetchData...但在 React 中会有些不同,包含表单元素的组件将会在 state 追踪输入的值,并且每次调用回调函数 onChange 会更新 state,重新渲染组件。...存储全局数据,会有一个问题,如果用户刷新了网页,那么通过redux存储的全局数据就会被全部清空,比如登录信息等。

    5.1K30

    前端高频react面试题

    系统变得错综复杂的时候,想重现问题或者添加新功能就会变得举步维艰。如果这还不够糟糕,考虑一些来自前端开发领域的新需求,更新调优、服务端渲染、路由跳转前请求数据等等。...一些库 React 视图在视图层禁止异步和直接操作 DOM来解决这个问题。美中不足的是,React 依旧把处理 state 数据的问题留给了你。Redux就是为了帮你解决这个问题。...该action的函数体会自动执行 store.dispatch(action)}(2)使用redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js ...在使用 React Router,如何获取当前页面的路由或浏览器地址栏的地址?... setState 传入 null ,并不会触发 render。

    3.3K20

    前端react面试题(必备)2

    tree 需要编写reducereact-router 里的 Link 标签和 a 标签的区别从最终渲染的 DOM 来看,这两者都是链接,都是 标签,区别是∶ 是react-router 里实现路由跳转的链接...做了3件事情:有onclick那就执行onclickclick的时候阻止a标签默认事件根据跳转href(即是to),用history (web前端路由两种方式之一,history & hash... setState 传入 null ,并不会触发 render。... DOM 树很大,遍历两棵树进行各种比对还是相当耗性能的,特别是在顶层 setState 一个微小的修改,默认会去遍历整棵树。...该action的函数体会自动执行 store.dispatch(action)}(2)使用redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js

    2.3K20

    Taro 小程序开发大型实战(七):尝鲜微信小程序云(下篇)

    UI 组件库[2]:我们用 Taro 自带的路由功能实现了多页面跳转,并用 Taro UI 组件库升级了应用界面 实现微信和支付宝多端登录[3]:实现了微信、支付宝以及普通登录和退出登录 使用 Hooks...如果创建帖子成功,我们使用 redux-saga 提供的 effects helpers 函数:put,put 类似之前在 view 的 dispatch 操作,,来 dispatch 了三个 action...并且,加了一层 if 判断,只有当没有登录,即 isLogged 为 false 的时候,才进行获取缓存操作。...如果获取帖子列表成功,我们使用 redux-saga 提供的 effects helpers 函数:put,put 类似之前在 view 的 dispatch 操作,,来 dispatch 了两个 action...如果获取单个帖子成功,我们使用 redux-saga 提供的 effects helpers 函数:put,put 类似之前在 view 的 dispatch 操作,,来 dispatch 了两个 action

    2.6K10

    react全家桶包括哪些_react 自定义组件

    state 参数没有任何影响,因为 state 保存在 history 对象;HashRouter 刷新后会导致 state 参数丢失 HashRouter 可以解决一些路径错误相关的问题,:样式丢失...后, /home/:id/:title url: “” // 路由参数渲染后路径,不包括 ?...处理 redux 异步操作 npm install redux-saga // store.js import { createStore, applyMiddleware } from 'redux...Next.js默认已经给我们配置好了路由映射关系: 路径和组件的映射关系 这个映射关系就是在pages配置相关的组件都会自动生成对应的路径 默认page/index.js是页面的默认路径 页面跳转...路由的嵌套(子路由): 文件夹的嵌套,最后就可以形成子路由 路由的传参: Next.js无法通过 /user/:id的方式传递参数 只能通过 /user?

    5.8K20

    React之redux学习日志(reduxreact-reduxredux-saga

    ( applyMiddleware(     // 这里可以放一些中间件, redux-saga 等 ) ) ) export default store   create-action.js...Redux-Saga中间件 redux-saga中文文档地址:https://redux-saga-in-chinese.js.org/docs/basics/DeclarativeEffects.html...当我们需要执行一些异步操作,由于action只能返回一个对象,从而需要借助一些中间件来达到目的,redux-thunk 和 redux-saga是常见的两种中间件。   ...dispatch   put(updateUserInfoAction(res)) } function* testSaga() { // action-type被准备dispatch,执行...备注:redux-saga函数必须是一个Generator函数 拓展:还可以通过以下代码来将saga进行模块化: import { all, fork } from 'redux-saga/effects

    54830

    Dva 底层是如何组织起 Redux 数据流的?

    可以看下这个redux entry[5]的例子,除了 redux store 的创建,中间件的配置,路由的初始化,Provider 的 store 的绑定,saga 的初始化,还要处理 reducer,...的 createSagaMiddleware 创建 saga中间件,调用中间件的 run 方法所有收集起来的异步方法 // run方法监听每一个副作用action,action发生的时候,执行对应的..._store.asyncReducers : {}), }), ); } } } 路由 在前面的 dva.start 方法我们看到了 createOpts,并了解到在 dva-core...router 相关的 reducer 和中间件配置,其中 connectRouter 和 routerMiddleware 均使用了 connected-react-router 这个库,其主要思路是:把路由跳转也当做了一种特殊的...参考资料 [1] redux: https://github.com/reduxjs/redux [2] redux-saga: https://github.com/redux-saga/redux-saga

    1.4K10

    百度前端必会react面试题汇总

    例如,从 /a 导航至 /b ,会使用默认的 confirm 函数弹出一个提示,用户点击确定后才进行导航,否则不做任何处理;// 这是默认的确认函数const getConfirmation = (...由此可以看出,HashRouter 是通过 URL 的 hash 属性来控制路由跳转的:<HashRouter basename={string} getUserConfirmation={...对 React 和 Vue 的理解,它们的异同相似之处:都将注意力集中保持在核心库,而将其他功能路由和全局状态管理交给相关的库都有自己的构建工具,能让你得到一个根据最佳实践设置的项目模板。...redux-saga优点:异步解耦:异步操作被被转移到单独saga.js,不再是掺杂在action.js或component.js;action摆脱thunk function: dispatch的参数依然是.../catch语法直接捕获处理;功能强⼤:redux-saga提供了⼤量的Saga辅助函数和Effect创建器供开发者使⽤,开发者⽆须封装或者简单封装即可使⽤;灵活:redux-saga可以将多个Saga

    1.6K10

    字节前端必会react面试题1

    由此可以看出,BrowserRouter 是使用 HTML 5 的 history API 来控制路由跳转的:<BrowserRouter basename={string} forceRefresh...例如,从 /a 导航至 /b ,会使用默认的 confirm 函数弹出一个提示,用户点击确定后才进行导航,否则不做任何处理;// 这是默认的确认函数const getConfirmation = (...由此可以看出,HashRouter 是通过 URL 的 hash 属性来控制路由跳转的:<HashRouter basename={string} getUserConfirmation={...该action的函数体会自动执行 store.dispatch(action)}(2)使用redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js ...state 更新流程: 这个过程当中涉及的函数:shouldComponentUpdate: 组件的 state 或 props 发生改变,都会首先触发这个生命周期函数。

    3.2K20

    React知识图谱

    使用场景Antd4 Form实现useForm的时候。 useImperativeHandle useImperativeHandle 可以让你在使用 ref 自定义暴露给父组件的实例值。...:使用简单,但是容易形成“嵌套地狱” • redux-saga:使用“复杂”,但是能够用同步的方式实现异步,内部使用了generator函数,比async await功能更丰富 • redux-observable...MemoryRouter:把 URL 的历史记录保存在内存的 (不读取、不写入地址栏)。在测试和非浏览器环境很有用,React Native。...Link 跳转组件 NavLink 一个特殊版本的 Link,它与当前 URL 匹配,为其渲染元素添加样式属性。 Redirect 重定向。路由守卫,会有到这个组件。...dva 是一个基于 reduxredux-saga 的数据流方案。

    33720

    前端一面react面试题(持续更新)_2023-02-27

    对 React 和 Vue 的理解,它们的异同 相似之处: 都将注意力集中保持在核心库,而将其他功能路由和全局状态管理交给相关的库 都有自己的构建工具,能让你得到一个根据最佳实践设置的项目模板。...做了3件事情: 有onclick那就执行onclick click的时候阻止a标签默认事件 根据跳转href(即是to),用history (web前端路由两种方式之一,history &...请求中间件如何处理并发 使用redux-Saga redux-saga是一个管理redux应用异步操作的中间件,用于代替 redux-thunk 的。...redux-saga如何处理并发: takeEvery 可以让多个 saga 任务并行被 fork 执行。...import { fork, take } from "redux-saga/effects" const takeEvery = (pattern, saga, ...args) =

    1.7K20

    字节前端面试被问到的react问题

    这种机制可以让我们改变数据流,实现异步action ,action 过滤,日志输出,异常报告等功能redux-logger:提供日志输出redux-thunk:处理异步操作redux-promise:... ref 属性被用于一个自定义的类组件,ref 对象将接收该组件已挂载的实例作为他的 current。当在父组件需要访问子组件的 ref 可使用传递 Refs 或回调 Refs。...react-router 里的 Link 标签和 a 标签的区别从最终渲染的 DOM 来看,这两者都是链接,都是 标签,区别是∶ 是react-router 里实现路由跳转的链接,一般配合<...Dva工作原理集成redux+redux-saga工作原理改变发生通常是通过用户交互行为或者浏览器行为(路由跳转等)触发的,当此类行为会改变数据的时候可以通过 dispatch 发起一个 action...所有对store状态的变更,都应该通过action触发,异步任务(通常都是业务或获取数据任务)也不例外,而为了不将业务或数据相关的任务混入React组件,就需要使用其他框架配合管理异步任务流程,redux-thunk

    2.1K20

    一篇文章读懂 React and redux 前端开发 -DvaJS, a lightweight and elm-style framework.快速上手Dva 概念#例子和脚手架Dva 图解K

    Dva 概念 #数据流向 数据的改变发生通常是通过用户交互行为或者浏览器行为(路由跳转等)触发的,当此类行为会改变数据的时候可以通过 dispatch 发起一个 action,如果是同步行为会直接通过...在 dva ,connect Model 的组件通过 props 可以访问到 dispatch,可以调用 Model 的 Reducer 或者 Effects,常见的形式: dispatch({....png | left | 747x504 上面说了, 可以使用 Middleware 拦截 action, 这样一来异步的网络操作也就很方便了, 做成一个 Middleware 就行了, 这里使用 redux-saga...这个类库, 举个栗子: 点击创建 Todo 的按钮, 发起一个 type == addTodo 的 action saga 拦截这个 action, 发起 http 请求, 如果请求成功, 则继续向...图片.png | left | 747x490 有了前面的三步铺垫, Dva 的出现也就水到渠成了, 正如 Dva 官网所言, Dva 是基于 React + Redux + Saga 的最佳实践沉淀,

    1.4K30

    2021高频前端面试题汇总之React篇

    saga.js ,不再是掺杂在 action.js 或 component.js action摆脱thunk function: dispatch 的参数依然是⼀个纯粹的 action (FSA...功能强⼤: redux-saga提供了⼤量的Saga 辅助函数和Effect 创建器供开发者使⽤,开发者⽆须封装或者简单封装即可使⽤ 灵活: redux-saga可以将多个Saga可以串⾏/并⾏组合起来...这些 state 可能包括服务器响应、缓存数据、本地生成尚未持久化到服务器的数据,也包括 UI状态,激活的路由,被选中的标签,是否显示加载动效或者分页器等等。 管理不断变化的 state 非常困难。...系统变得错综复杂的时候,想重现问题或者添加新功能就会变得举步维艰。 如果这还不够糟糕,考虑一些来自前端开发领域的新需求,更新调优、服务端渲染、路由跳转前请求数据等等。...一些库 React 视图在视图层禁止异步和直接操作 DOM来解决这个问题。美中不足的是,React 依旧把处理 state 数据的问题留给了你。Redux就是为了帮你解决这个问题。

    2K00

    2022社招React面试题 附答案

    该action的函数体会自动执行 store.dispatch(action)}复制代码 (2)使用redux-saga中间件 redux-saga优点: 异步解耦: 异步操作被被转移到单独 saga.js...: redux-saga提供了⼤量的Saga 辅助函数和Effect 创建器供开发者使⽤,开发者⽆须封装或者简单封装即可使⽤ 灵活: redux-saga可以将多个Saga可以串⾏/并⾏组合起来,形成⼀...这些 state 可能包括服务器响应、缓存数据、本地生成尚未持久化到服务器的数据,也包括 UI状态,激活的路由,被选中的标签,是否显示加载动效或者分页器等等。 管理不断变化的 state 非常困难。...系统变得错综复杂的时候,想重现问题或者添加新功能就会变得举步维艰。 如果这还不够糟糕,考虑一些来自前端开发领域的新需求,更新调优、服务端渲染、路由跳转前请求数据等等。...一些库 React 视图在视图层禁止异步和直接操作 DOM来解决这个问题。美中不足的是,React 依旧把处理 state 数据的问题留给了你。Redux就是为了帮你解决这个问题。

    2K50

    关于各方面 杂七杂八的一些内容

    网络IO问题其实就是我们现在用Redux+saga等等: 在网速非常快的时候,可设置,整个数据到达Dom,更新完毕以后再渲染 ,也可以精确控制 loading 的状态 在网速非常慢的时候,可设置,精确到单个组件的等待... 只会渲染一个路由(会根据路由的顺序进行匹配,如果匹配成功立即取消继续匹配), 有三个路由 path为:/:user 、/user,、空 ,URL为/user 那么三个路由全部匹配, 如果使用...中使用, 参数:from:表示来自于什么链接,也就是链接是redirect, 我们触发跳转命令,to:表示要跳转到的链接,这里是跳转到Jspangb的组件。...id=33#toc29 12.react-routePrompt的使用,每次路由切换进行提示: 注:MemoryRouter路由模式,不起作用。...到redux的组件, 来实现双向绑定router的数据到redux store, 这么做的好处就是让应用更Redux化,可以通过向仓库派发动作的方式实现路由跳转

    2K10
    领券