为了账号安全,请及时绑定邮箱和手机立即绑定

【九月打卡】第十一天 redux的使用

标签:
redux

课程:React18 系统精讲

章节:redux

讲师:阿莱克斯刘

课程内容:

一、创建store
	a. 创建store
		i. 在src文件夹下,新建redux文件夹
		ii. 在redux文件夹下,创建store.js文件
		
		iii. xx
	b. 创建reducer
		i. 在src文件夹下,新建reducer.ts文件
		ii. 将reducer方法写成匿名方法,导出。(这个匿名方法就是reducer)
		iii. 方法接收两个参数,第一个是传入的旧数据,第二个是更新数据的方式
		iv. 最后return 处理后的新数据,这里没有逻辑,就直接return旧数据
		
		v. reducer方法,通过action对state做出处理,最后return处理后的数据
	c. 给store初始化数据
		i. 创建全局数据对象
		ii. 将全局数据对象,赋值给state作为默认值
		iii. 只需给state传默认值即可,若调用函数没传state,则使用默认数据
		
	d. 连接store和reducer
		i. 只需要将reducer做为参数传递给store即可
		
二、使用store数据
	a. 在使用store数据的组件中引入store
	
	b. 调用store,访问数据
	
三、组件发送action
	a. 创建action对象
		i. type:执行的操作
		ii. payload:新数据,
		
	b. dispatch发送action给store
		i. 将action做为参数,调用store的dispatch方法即可
		
四、reducer处理数据
	a. store中保存的数据state是immutable只读的,因而我们不能直接修改store中的数据
	b. 因而我们通过es6的拓展语法,使用旧数据state创建新数据,同时将更新的数据传入,新数据newState,更新的数据的值就是action的payload
	c. 最后return新数据newState即可
	d. 通过switch判断action的type,来执行需要执行的操作
	
五、组件订阅store
	a. 在组将中调用store的subscribe()方法
	b. 参数是一个函数,在函数中通过store的getState()方法,获取store的数据对象
	c. 通过这个数据对象就可以拿到我们需要的数据
点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消