react-redux登录时将数据存入store,在其他页面获取数据

最新推荐文章于 2024-05-06 06:31:27 发布
最新推荐文章于 2024-05-06 06:31:27 发布
阅读量7.6k 收藏 5
点赞数 2
分类专栏： 前端 文章标签： react-redux react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013455430/article/details/88059266
版权

登录组件的目录结构

登录调用函数，调用action,将表单数据传过去

调用action，调用接口传入数据

 通过dispatch函数，调用reducer将数据传入store

然后使用调试工具redux-devtools可以看到当前多了token的节点

 接下来是在其他页面获取token

只需要将state的数据取出来，连接到当前的组件的prop属性

 直接在jsx中打印prop或者直接打印this.prop.token都可以得到token

但是还是有问题，如果刷新后当前的登录数据就会丢失，下一个就需要解决redux数据持久化的问题 

The Dark Kinght
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react+antd - Form 保存input 的值
Colbru的博客
03-15 351
/ 添加合同列表数据 constructor(props) {//通过传参的方式 setdata =(objname , key) = > {
react-redux-request:存放在Redux中的React声明式数据获取
04-28
react-redux-request是一个简单的组件，它将获取数据，将其存储在Redux中，然后通过渲染道具进行渲染。 与类似方法相比的优势： 与Redux无缝集成BYOD（自带数据获取器）：没有关于如何获取数据的假设。 只需提供一...
如何存储 React 组件的数据
chengnuo628的专栏
10-18 8605
转载地址:http://www.60sky.com/post/how-to-saved-react-component-data.html 主要讲解这几个部分：state、store、static、this、module-global data 前言 随着 React 和 Redux 的到来，一个共同的问题被问到： 我应该将数据保存在 Redux Store 中呢？还是
react中store与数据流
最新发布
2301_76379462的博客
05-06 699
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
react 使用store 中储存的数据
山外小楼
04-23 3101
1.文件夹目录是这样的 在actions.js中导出 需要获取的数据 export const SKIN = 'SKIN' // 当前主题皮肤 export function createActionChangeSkin(payload) { return { type: SKIN, payload } } 2.在reducers.js中定义skin方法 ...
react 全局储存/调用数据
m0_51105610的博客
03-29 1116
localStorage.getItem(key):获取指定key本地存储的值 localStorage.setItem(key,value)：将value存储到key字段 1. 在A页面中先存储 var imgs =123456 ; //声明个变量存储下数据 localStorage.setItem('key', imgs); //将变量imgs存储到name字段 2. 在B页面中使用： var naid = localStorage.getItem("key"); //获取指定key本地存
React 中的变量存储
糖衣
09-14 6955
  在React中，我们可以将数据保存在 props、state、store 或者 this 中，但是为了更好的管理数据，我们应该正确的存储数据。 本文大部分为翻译自Where to Hold React Component Data: state, store, static, and this 1、props   我们先从最简单的没有争议的 props 说起。   在 React 中 ...
当前页面前端的参数传递给另外一个页面
qq_18547341的博客
09-07 1761
1、前端通过get的方式将参数拼接到URL上。 window.location.href = ctx+"robot/baladjust/noBlend/downloadFile/"+date+"/"+bankAccount; 2、后端controller层接收请求并拿到参数放到session中，这样别的方法也可以调用了 @GetMapping("/overview/{date}/{bankAccount}") public String overview(@PathVariable("date"
typescript-react-redux-ie8:Typescript-react-redux-ie8，在线演示
05-11
TypeScript-React-Redux (IE8+)本项目是一个兼容IE8的 TypeScript + React + Redux + immutablejs 的项目模板。为了降低上手难度，我在项目中写3个DEMO：todomvc without immutabeljs (ts + react + redux)[todo] ...
create-react-redux-app：基于create-react-app的React样板
02-05
react-redux Redux-Saga 一成不变的 React路由器域 react-router-redux devDependencies： 随行（根据Airbnb规则） 预先提交 快速开始 1.克隆项目 # with SSH git clone git@github....
react-react-redux：使用React Hooks和Proxy的React Redux绑定
02-05
有几个与此回购相关的项目。 这是这些的索引。 react-react-redux v5-alpha（此存储库）：具有useMutableSource的实验性react-redux绑定。... ：一个将useTrackedState添加到官方react-redux库的拉取请求。 ：这是
react-redux-crud：一个示例react-redux-saga CRUD应用程序
02-05
如何安装git clone git@github.com:maprihoda/react-redux-crud.gitcd react-redux-crud 在1号航站楼： cd serveryarn install 在2号航站楼： cd clientyarn install怎么跑在1号航站楼： yarn start 这将启动侦听的...
React使用react-redux数据共享
weixin_47586598的博客
09-08 236
React使用react-redux数据共享
react实战笔记180:用redux存储登录状态1
qq_41632427的博客
10-28 296
前端
React 学习笔记 16 （将路由状态同步到store）
车联网开发的博客
09-30 486
1.首先安装插件 npm install connected-react-router 2.修改store/reducers/index.ts import { connectRouter } from "connected-react-router"; import { History } from "history"; import { combineReducers } from "redux"; import testReducer from "./test.reducer"; cons
redux开发工具里是最新的数据，但是页面展示的不是最新数据
qq_44928869的博客
10-12 255
（1）使用redux常见报错（在开发工具里可以看到redux的最新数据，但是页面获取不到最新数据） 错误解决方案 没有改变订阅者的this指向，在constructor该便this指向 ...
react-router与react-redux跳转后保存store数据(基于"react-router": "^2.8.0")
weixin_30550271的博客
06-01 193
1.router引入 import { Route, IndexRoute, Router, hashHistory, browserHistory } from 'react-router'; <Router routes={routes} history={browserHistory}/> 假设store结构如下,分别是主页home，详情页detail，评论页com...
React 配置 Redux 并结合本地存储设置token
sonic
10-26 1919
此 React 项目使用 TypeScript 和 Hooks API，本文介绍配置 Redux 并结合本地存储设置 token
react-redux 官网
11-14
根据提供的引用内容，React-Redux是一个将Redux与React结合使用的官方库。它提供了一种将Redux store与React组件连接起来的方式，使得组件可以访问store中的状态并对其进行操作。React-Redux还提供了一些高级特性，例如性能优化和异步数据获取。 React-Redux的官方网站为https://react-redux.js.org/。该网站提供了详细的文档和示例，以帮助开发人员更好地理解和使用React-Redux。 在该网站的主页上，可以找到React-Redux的介绍、安装指南、基本用法、高级用法、API文档等内容。其中，基本用法和高级用法部分提供了丰富的示例代码，可以帮助开发人员更好地理解React-Redux的使用方法。 此外，该网站还提供了一个“快速开始”页面，其中包含了一个简单的示例应用程序，可以帮助开发人员快速上手React-Redux。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值