【九月打卡】第十三天 ReduxHooks版

课程：React18 系统精讲

章节：Redux

讲师：阿莱克斯刘

课程内容：

1. hook版，引入了hooks来完成store的订阅与action的分发
2. useSelector订阅数据
3. useDispatch分发数据

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. useSelector订阅数据
		i. 在组件中，通过selectorHook，来访问数据。
			1) useSelector接收一个回调函数，
			2) state参数就是store中的全局数据对象
		
	d. 解决typescript报错：
		i. 因为state没有ts类型定义，所以会报错
		ii. 给state加上store的类型定义即可
		iii. store类型定义：
			1) store的数据类型，本质就是reducer的返回值类型（模块的payload值类型，如上面的languageState），但它是由多个reducer返回值类型组成的一个类型集合
			2) 在store中定义
				a) ReturnType：是ts内置方法，返回ts类型定义
				b) typeof：拿到store中所有state数据值的类型定义
			
	e. 高级方案
		i. 在组件中，给state添加ts类型定义，则组件与store形成；了绑定关系，组件便不能复用
		ii. 因而我们可以将类型定义从组件中剥离出来
		iii. 方案：通过TypeUseSelectorHook接口，统一给useSelectorHook做类型定义
			1) 在redux目录下新建hooks.ts文件
			2) 因为react-redux中的useSelectorHook与我们要使用的hook同名，因而在引入时将react-reduxHook用as重命名一下
			
			这样直接使用重定义类型的hook，就不会报错
			
4. 创建action creater工厂函数
	a. 在action文件中定义常量，记得导出，全部大写
		i. 
		ii. 将reducer中，case的字符串换成常量
		iii. 
	b. 创建action工厂函数
		i. 函数接收的参数，全供payload使用。
		ii. 函数返回值为对象{}，action本就是一个对象
		iii. 记得函数要export导出，这里没有导出
			1) 
		
			1) 
		iv. 使用action工厂函数
		v. 传参调用action工厂函数即可，
		
	c. 分发数据useDispatch
		i. 导入useDispatchHook
			1) 这里可以给action类型定义，也可以不给，为了保证js灵活性，建议不给
			
		ii. 使用hook
			1) 将工厂函数返回值，直接作为参数调用hook即可
			
5. 给action创建TypeScript类型文件
		i. 这里使用了混合类型导出，便于类型动态变化（切换至当前使用的action类型）
		ii. action是一个对象，所以工厂函数return一个对象
		iii. TypeScript类型文件，也是供给函数返回值类型，即action类型
	a. 定义类型
	
	b. 导出混合类型
	
	c. action工厂函数返回值类型，定义为相应类型
	
	d. 在reducer中使用action混合类型