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

当用户再次选择页面时,我想在redux saga store中显示保存的数据

当用户再次选择页面时,想要在redux saga store中显示保存的数据,可以通过以下步骤实现:

  1. 首先,在Redux中创建一个Saga,用于处理数据的保存和获取操作。Saga是一个用于处理异步操作的中间件,可以在其中编写逻辑来处理数据的获取和保存。
  2. 在Saga中,可以使用Redux的takeLatesttakeEvery方法来监听用户选择页面的动作。这些方法可以帮助我们捕获特定的动作,并在其触发时执行相应的逻辑。
  3. 当用户选择页面时,可以在Saga中编写逻辑来保存数据到Redux的store中。可以使用Redux的put方法来触发一个保存数据的动作,将数据作为payload传递给该动作。
  4. 在Redux的reducer中,可以编写逻辑来处理保存数据的动作,并将数据存储到store中的相应位置。
  5. 最后,在页面中,可以通过Redux的connect方法将store中的数据连接到组件中,并在需要显示保存的数据的地方使用该数据。

以下是一个示例代码:

代码语言:txt
复制
// Saga
import { takeLatest, put } from 'redux-saga/effects';
import { SAVE_DATA, SET_DATA } from './actions';

function* saveDataSaga(action) {
  // 保存数据到Redux的store中
  yield put({ type: SET_DATA, payload: action.payload });
}

function* rootSaga() {
  yield takeLatest(SAVE_DATA, saveDataSaga);
}

export default rootSaga;

// Reducer
import { SET_DATA } from './actions';

const initialState = {
  savedData: null,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case SET_DATA:
      return {
        ...state,
        savedData: action.payload,
      };
    default:
      return state;
  }
};

export default reducer;

// Component
import React from 'react';
import { connect } from 'react-redux';

const MyComponent = ({ savedData }) => {
  return (
    <div>
      {/* 在这里使用保存的数据 */}
      {savedData && <p>{savedData}</p>}
    </div>
  );
};

const mapStateToProps = (state) => ({
  savedData: state.savedData,
});

export default connect(mapStateToProps)(MyComponent);

在上述示例中,当用户选择页面时,可以触发一个名为SAVE_DATA的动作,并将需要保存的数据作为payload传递给该动作。Saga会监听该动作,并在其触发时执行saveDataSaga函数,将数据保存到Redux的store中。在组件中,可以通过connect方法将store中的savedData数据连接到组件中,并在需要显示保存的数据的地方使用该数据。

请注意,上述示例中的代码是一个简化版本,实际应用中可能需要根据具体情况进行适当的修改和扩展。

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

相关·内容

React saga_react获取子组件ref

大家好,又见面了,是你们朋友全栈君。...这些Effect执行后,函数resolve返回一个描述对象,然后redux-saga中间件根据这个描述对象恢复执行generator函数。...put使用方法: yield put({type:'login'}) select put方法与reduxdispatch相对应,同样的如果我们想在中间件获取state,那么需要使用select...select方法对应reduxgetState,用户获取storestate,使用方法: const state= yield select() fork fork方法在第三章实例中会详细介绍...(1)LoginPanel(登陆页) 登陆页功能包括 输入时时保存用户名 输入时时保存密码 点击sign in 请求判断是否登陆成功 I)输入时时保存用户名和密码 用户名输入框和密码框onchange

4.5K30

redux-saga_pub culture

下面是一个简单例子: 在用户提交表单时候,我们想要做如下事情: 校验一些输入信息 (简单, 写在组件里) 弹起提示信息(聪明,一定要写一个公用提示信息模块,这样别的页面引入就可以用了, 呵呵呵呵...比如,我们需要一个刷新按钮, 让用户可以手动从后台刷新数据, 当用户不停单机刷新时候, 应该最新一次请求数据被刷新在页面上,这里可以使用takeLatest。...put方法 put就是reduxdispatch,用来触发reducer更新store 有什么弊端 目前在项目实践遇到一些问题: redux-saga模型理解和学习需要投入很多精力 因为需要用...在重用方面,解耦显示层和业务层之后, 代码重用度也得到了提升。 选择Saga原因 开始时候一直在犹豫是否需要使用Saga或thunk,因为并不能很好把握这两者到底解决了什么问题。...很显然对于一个业务层来说,saga会是一个更合适选择,但同时也带来了学习成本提高。 版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。

1.4K10
  • Redux原理分析以及使用详解(TS && JS)

    用户使用方式非常简单 用户之间没有协作 不需要与服务器大量交互,也没有使用 WebSocket 视图层(View)只从单一来源获取数据 从组件角度看,如果你应用有以下场景,可以考虑使用 Redux。...一个特点,单向数据流动,会让开发者阅读代码以及数据流向更清楚,数据从一个方向父组件流向子组件(通过props),但是这也伴随着一个问题,两个非父子组件之间通信就相对麻烦,例如A页面用到了B页面产生数据...redux-saga将react同步操作与异步操作区分开来,以便于后期管理与维护 ,redux- saga相当于在Redux原有数据多了一层,通过对Action进行监听,从而捕获到监听Action...在每个页面都去调用这个接口,显然这是浪费性能想在react入口文件去调用action,然后分发给reducer,存储到store页面就能获取到值。...从React页面渲染来说:页面肯定是先渲染,不会关心dispatch,也不会关心action,只会关心store里面数据变化,其实也就是第一次useEffect时候,数据取得其实是初始值。

    4.3K30

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

    :发表此文章用户,这里我们为了方便起见,直接保存用户完整信息,一般最佳实践建议是保存用户 _id 属性,然后在查询 post ,取出此用户 _id 属性,然后去查 user 得到用户完整信息...login 云函数,并将 userInfo 作为参数传给云函数,用于在云函数中使用用户信息来注册用户保存数据库,我们将在下一节实现这个云函数。...指的是触发云函数事件,小程序端调用云函数,event 就是小程序端调用云函数传入参数,外加后端自动注入小程序用户 openid 和小程序 appid。...最后,我们判断一下 getStorage 逻辑,只有当此时 Redux Store 里面没有数据,我们才去获取 storage 里面的数据来更新 Redux Store。...扩充 Logout 清空数据范围 因为在 Redux Store 里面的 user 属性多出了一个 userId 属性,所以我们在 Logout 组件里 dispatch action ,要清空

    2.3K20

    前端高频react面试题

    调用setState(),render会被再次调用,因为默认情况下shouldComponentUpdate总是返回true,所以默认情况下 React 是没有优化。...这个问题就设计到了数据持久化, 主要实现方式有以下几种:Redux: 将页面数据存储在redux,在重新加载页面,获取Redux数据;data.js: 使用webpack构建项目,可以建一个文件...,data.js,将数据保存data.js,跳转页面后获取;sessionStorge: 在进入选择地址页面之前,componentWillUnMount时候,将数据存储到sessionStorage...,该action函数体会自动执行 store.dispatch(action)}(2)使用redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js...在使用 React Router,如何获取当前页面的路由或浏览器地址栏地址?

    3.4K20

    前端二面高频react面试题集锦_2023-02-23

    ,随后替换页面之前真实DOM 【旧虚拟DOM】 未找到 与 【新虚拟DOM】相同key 根据数据创建真实DOM,随后渲染到页面 React-Router 4怎样在路由变化时重新渲染同一个组件...为应用每一个状态设计简洁视图,数据改变 React 能有效地更新并正确地渲染组件。 以声明式编写 UI,可以让代码更加可靠,且方便调试。...(3) Virtual DOM 真实页面对应一个 DOM 树。在传统页面的开发模式,每次需要更新页面,都要手动操作 DOM 来进行更新。 DOM 操作非常昂贵。...,该action函数体会自动执行 store.dispatch(action) } (2)使用redux-saga中间件 redux-saga优点: 异步解耦: 异步操作被被转移到单独 saga.js...这样写的话, URL path 为 “/login” ,和 都会被匹配,因此页面会展示 Home 和 Login

    2.8K20

    美团前端react面试题汇总

    页面没使用服务渲染,请求页面,返回body里为空,之后执行js将html结构注入到body里,结合css显示出来;SSR优势:对SEO友好所有的模版、图片等资源都存在服务器端一个html返回所有数据减少...js代码下载、加载、解析完成后再请求数据渲染,等待过程页面是什么都没有的,就是用户看到白屏。...,该action函数体会自动执行 store.dispatch(action)}(2)使用redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js...当用户提交表单,前面提到元素值将随表单一起被发送。...存储全局数据,会有一个问题,如果用户刷新了网页,那么通过redux存储全局数据就会被全部清空,比如登录信息等。

    5.1K30

    React组件设计实践总结05 - 状态管理

    同一份数据需要响应到多个视图,且被多个视图进行变更 需要维护全局状态,并在他们变动响应到视图 数据流变得复杂,React 组件本身已经无法驾驭。例如跨页面用户协作 需要统一管理应用状态。...比如: 你需要持久化应用状态, 这样你可以从本地存储或服务器返回数据恢复应用 需要实现撤销重做这些功能 实现跨页面用户协作 应用状态很复杂 数据流比较复杂 许多不相关组件需要共享和更新状态 外置状态...领域数据一般推荐放在 ReduxStore ,我们通常会将 Redux Store 看作一个数据库,存放范式化数据。 状态是否会被多个组件或者跨页面共享?...数据变动触发依赖该数据副作用,其中包含‘视图’。...比如一个数据变更涉及到 Mobx 多个 Store,可以体现出 Redux 方式更加优雅,数据流更加清晰.

    2.1K31

    手写Redux-Saga源码

    本文要讲就是Redux-Saga,这个也是在实际工作中使用最多Redux异步解决方案。...这个action会触发一个请求,请求返回数据拿来显示页面上就行: import React from 'react'; import { connect } from 'react-redux';...,然后进行处理,这里代码简化了,只支持IO这种effect,官方源码还支持promise和iterator,具体可以看看他源码:github.com/redux-saga/… effectRunner...因为我们代码在不同环境下运行可能会产生不同结果,特别是这些异步请求,我们写单元测试来造这些数据也会很麻烦。...官方文档这种写法反而很好理解,这里采用文档这种写法: export function takeEvery(pattern, saga) { function* takeEveryHelper

    1.7K30

    前端react面试题(必备)2

    props不可以变性就保证相同输入,页面显示内容是一样,并且不会产生副作用为什么使用jsx组件没有看到使用react却需要引入react?... DOM 树很大,遍历两棵树进行各种比对还是相当耗性能,特别是在顶层 setState 一个微小修改,默认会去遍历整棵树。...,该action函数体会自动执行 store.dispatch(action)}(2)使用redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js...(action)}(组件)状态(state)和属性(props)之间有何不同State 是一种数据结构,用于组件挂载所需数据默认值。...尽管非受控组件通常更易于实现,因为只需使用refs即可从 DOM 获取值,但通常建议优先选择受控制组件,而不是非受控制组件。

    2.3K20

    单向数据流-从共享状态管理:fluxreduxvuex漫谈异步数据处理

    {   // TODO    next(action); } 单页面应用充斥着大量异步请求(ajax)。...redux-saga 采用了另外一种思路,它没有把异步操作放在 action creator ,也没有去处理 reductor,而是把所有的异步操作看成“线程”,可以通过普通action去触发它,操作完成也会触发...redux-saga 把异步获取数据这类操作都叫做副作用(Side  Effect),它目标就是把这些副作用管理好,让他们执行更高效,测试更简单,在处理故障更容易。...Vuex数据顺序是: View调用store.commit提交对应请求到Store对应mutation函数->store改变(vue检测到数据变化自动渲染) redux 推荐使用 Object.assign...这样看来认为VUE是更推荐在使用了VUEX框架每个组件内部都使用store,而React-Redux则提供了自由选择性。

    3.7K40

    一天梳理完react面试高频题

    一个 匹配成功,它将渲染其内容,它不匹配就会渲染 null。没有路径 将始终被匹配。...为应用每一个状态设计简洁视图,数据改变 React 能有效地更新并正确地渲染组件。 以声明式编写 UI,可以让代码更加可靠,且方便调试。...(3) Virtual DOM真实页面对应一个 DOM 树。在传统页面的开发模式,每次需要更新页面,都要手动操作 DOM 来进行更新。 DOM 操作非常昂贵。...,该action函数体会自动执行 store.dispatch(action)}(2)使用redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js...reactkey作用简单说:key 是虚拟DOM一种标识,在更新显示是key起到了极其重要作用复杂说:状态数据发生改变时候,react会根据【新数据】生成【新虚拟DOM】,随后react

    4.1K20

    百度前端高频react面试题(持续更新)_2023-02-27

    props不可以变性就保证相同输入,页面显示内容是一样,并且不会产生副作用 高阶组件存在问题 静态方法丢失(必须将静态方法做拷贝) refs 属性不能透传(如果你向一个由高阶组件创建组件元素添加...,该action函数体会自动执行 store.dispatch(action) } (2)使用redux-saga中间件 redux-saga优点: 异步解耦: 异步操作被被转移到单独 saga.js...简单说就是,当你不想在组件树通过逐层传递props或者state方式来传递数据,可以使用Context来实现跨层级组件数据传递。... ref 属性被用于一个自定义类组件,ref 对象将接收该组件已挂载实例作为他 current。 当在父组件需要访问子组件 ref 可使用传递 Refs 或回调 Refs。...在componentWillMountfetch data,数据一定在render后才能到达,如果忘记了设置初始状态,用户体验不好。

    2.3K30

    React高频面试题合集(二)

    虚拟 DOM (VDOM)是真实 DOM 在内存表示。UI 表示形式保存在内存,并与实际 DOM 同步。这是一个发生在渲染函数被调用和元素在屏幕上显示之间步骤,整个过程被称为调和。...使用效果: useEffect是按照顺序执行代码,改变屏幕像素之后执行(先渲染,后改变DOM),改变屏幕内容可能会产生闪烁;useLayoutEffect是改变屏幕像素之前就执行了(会推迟页面显示事件...为应用每一个状态设计简洁视图,数据改变 React 能有效地更新并正确地渲染组件。 以声明式编写 UI,可以让代码更加可靠,且方便调试。...(3) Virtual DOM真实页面对应一个 DOM 树。在传统页面的开发模式,每次需要更新页面,都要手动操作 DOM 来进行更新。 DOM 操作非常昂贵。...所以,react很方便和其他平台集成reactkey作用简单说:key 是虚拟DOM一种标识,在更新显示是key起到了极其重要作用复杂说:状态数据发生改变时候,react会根据【新数据

    1.3K30

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

    ref 属性被用于一个自定义类组件,ref 对象将接收该组件已挂载实例作为他 current。当在父组件需要访问子组件 ref 可使用传递 Refs 或回调 Refs。...有什么缺点一个组件所需要数据,必须由父组件传过来,而不能像 flux 中直接从 store一个组件相关数据更新,即使父组件不需要用到这个组件,父组件还是会重新 render,可能会有效率影响...Dva工作原理集成redux+redux-saga工作原理改变发生通常是通过用户交互行为或者浏览器行为(如路由跳转等)触发,当此类行为会改变数据时候可以通过 dispatch 发起一个 action...,异步任务(通常都是业务或获取数据任务)也不例外,而为了不将业务或数据相关任务混入React组件,就需要使用其他框架配合管理异步任务流程,如redux-thunk,redux-saga等;Mobx是一个透明函数响应式编程状态管理库...,且没有任何其他影响数据对比总结:redux数据保存在单一store,mobx将数据保存在分散多个storeredux使用plain object保存数据,需要手动处理变化后操作;mobx

    2.1K20

    深入理解 redux 数据流和异步过程管理

    组件从 store 数据交互时候去通知 store 改变对应数据。...但是 context 做为 store 有一个问题,任何组件都能从 context 取出数据来修改,那么排查问题时候就特别困难,因为并不知道是哪个组件把数据改坏,也就是数据流不清晰。...正是因为这个原因,我们几乎见不到用 context 作为 store,基本都是搭配一个 redux。 所以为什么 redux 好呢?第一个原因就是数据流清晰,改变数据有统一入口。...那么如果想在到达 store 之前多做一些处理呢?在哪里加? 改造 dispatch!中间件原理就是层层包装 dispatch。...相比 context 混乱数据流,redux view -> action -> store -> view 单向数据流更清晰且容易管理。

    2.5K10

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

    大家好,又见面了,是你们朋友全栈君。...Redux 三大核心概念 4.2.1 store 单一数据源 整个应用程序state被存储在一颗object tree,并且这个object tree只存储在一个 store Redux并没有强制让我们不能创建多个...一般保存在 components 文件夹下 容器组件 a. 负责管理数据和业务逻辑,不负责 UI 呈现 b. 使用 Redux API c....): 初始 state 返回值 (Store): 保存了应用所有 state 对象。...,这就是同构应用 同构是一种SSR形态,是现代SSR一种表现形式 当用户发出请求,先在服务器通过SSR渲染出首页内容 但是对应代码同样可以在客户端被执行 执行目的包括事件绑定等以及其他页面切换也可以在客户端被渲染

    5.8K20
    领券