亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

【九月打卡】第十二天 Redux——TypeScript版

標簽:
redux

课程:React18 系统精讲

章节:Redux

讲师:阿莱克斯刘

课程内容:

1. 基础版的重构版进行了文件架构改造,便于维护管理——action creater工厂模式
2. 同时加入了TypeScript(定义action类型)

how?

1. 创建文件夹
	a. 在src文件夹下,新建redux文件夹
	b. 在redux文件夹下,创建store.ts文件
	c. 在redux文件夹下,创建xxx模块文件夹
	d. 在xxx文件夹下,创建xxxActions.ts文件
	e. 在xxx文件夹下,创建xxxReducer.ts文件
		
2. 创建store
	a. 创建store
		i. 在store.js中,通过createStore()函数,创建并导出store
		
3. 创建reducer
		i. 在xxxReducer.ts文件中
		ii. 将reducer方法写成匿名方法,导出。(这个匿名方法就是reducer)
		iii. 方法接收两个参数,第一个是传入的旧数据,第二个是更新数据的方式
		iv. 最后return 处理后的新数据,这里没有逻辑,就直接return旧数据
		
		v. reducer方法,通过action对state做出处理,最后return处理后的数据
	a. 给store初始化数据
		i. 创建全局数据对象
		ii. 将全局数据对象,赋值给state作为默认值
		iii. 只需给state传默认值即可,若调用函数没传state,则使用默认数据
		
	b. 连接store和reducer
		i. 只需要将reducer做为参数传递给store即可
		
	c. 使用store数据
	d. 在使用store数据的组件中引入store
	
	e. 调用store,访问数据
	
4. 创建action creater工厂函数
	a. 在action文件中定义常量,记得导出,全部大写
		i. 
		ii. 将reducer中,case的字符串换成常量
		iii. 
	b. 创建action工厂函数
		i. 函数接收的参数,全供payload使用。
		ii. 函数返回值为对象{},action本就是一个对象
		iii. 记得函数要export导出,这里没有导出
			1) 
		
			1) 
		iv. 使用action工厂函数
		v. 传参调用action工厂函数即可,
		
5. 给action创建TypeScript类型文件
		i. 这里使用了混合类型导出,便于类型动态变化(切换至当前使用的action类型)
		ii. action是一个对象,所以工厂函数return一个对象
		iii. TypeScript类型文件,也是供给函数返回值类型,即action类型
	a. 定义类型
	
	b. 导出混合类型
	
	c. action工厂函数返回值类型,定义为相应类型
	
	d. 在reducer中使用action混合类型
點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
Web前端工程師
手記
粉絲
0
獲贊與收藏
0

關注作者,訂閱最新文章

閱讀免費教程

  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消