# redux_study_201125

**Repository Path**: tianyucoder/redux_study_201125

## Basic Information

- **Project Name**: redux_study_201125
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-20
- **Last Updated**: 2021-04-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 1.求和案例_纯react版
			用react实现一个简单的求和案例

## 2.求和案例_redux迷你版
		(1).去除Count组件自身的状态(老刘留着)
		
		(2).src下建立:
						-redux
							-store.js
							-count_reducer.js

		(3).store.js：
					1).引入redux中的createStore函数，创建一个store
					2).createStore调用时要传入一个为其服务的reducer
					3).记得暴露store对象

		(4).count_reducer.js：
					1).reducer的本质是一个函数，接收：preState,action，返回加工后的状态
					2).reducer有两个作用：初始化状态，加工状态
					3).reducer被第一次调用时，是store自动触发的，
									传递的preState是undefined,
									传递的action是:{type:'@@redux/INIT_a.2.b.4}

		(5).在index.js中监测store中状态的改变，一旦发生改变重新渲染<App/>
				备注：redux只负责管理状态，至于状态的改变驱动着页面的展示，要靠我们自己写。

## 3.求和案例_redux完整版
			新增文件：
							1.count_action.js 专门用于创建action对象
							2.constant.js 放置容易写错的type值
							
## 4.求和案例_redux异步action版
		 (1).明确：延迟的动作不想交给组件自身，想交给action
		 (2).何时需要异步action：想要对状态进行操作，但是具体的数据靠异步任务返回。
		 (3).具体编码：
		 			1).yarn add redux-thunk，并配置在store中
		 			2).创建action的函数不再返回一般对象，而是返回一个函数，该函数中写异步任务。
		 			3).异步任务有结果后，分发一个同步的action去真正操作数据。
		 (4).备注：异步action不是必须要写的，完全可以自己等待异步任务有结果了再去分发同步action。

## 5.求和案例_react-redux版
		 (1).明确两个概念：
						1).UI组件:不能使用任何redux的api，只负责页面的呈现、交互等。
						2).容器组件：负责和redux通信，将结果交给UI组件。
		 (2).如何创建一个容器组件 ———— 靠react-redux 的 connect函数
						写法：connect(mapStateToProps,mapDispatchToProps)(UI组件)
								-mapStateToProps:映射状态，返回值是一个对象
								-mapDispatchToProps:映射操作状态的方法，返回值是一个对象
						备注：容器组件中的store是靠props传进去的，而不是在容器组件中直接引入
		 (3).具体这步骤：
						(1).把原来的Count组件删减成一个合格的UI组件
						(2).yarn add react-redux
						(3).建立container文件夹，文件夹中建立Count.jsx
						(4).引入connect(映射state的函数，映射dispatch的函数)(UI组件)
						(5).UI组件使用this.props.xxxxxx进行读取状态以及操作状态
						(6).小优势：index.js中不用自己监测redux数据变化了，直接删掉原来监测的代码即可，容器组件可以进行自动监测。

## 6.求和案例_react-redux优化版
		(1).给<App/>包裹一个<Provider store={store}>，可以实现：
						a.会统一给所有App下的容器件组统一传递store，（不用自己亲自给容器组件传递store了）
						b.不用再自己检测redux中状态的改变了
		(2).mapDispatchToProps也可以简单的写成一个对象(底层会自动dispatch)

## 7.求和案例_整合UI与容器
		(1).容器组件和UI组件整合成一个文件
		(2).在UI组件中通过this.props.xxxxxxx读取和操作状态			
		
## 8.数据共享版
			(1).定义一个Pserson组件，和Count组件通过redux共享数据。
			(2).为Person组件编写：reducer、action，配置constant常量。
			(3).重点：Person的reducer和Count的reducer要使用combineReducers进行合并，
					合并后的总状态是一个对象！！！
			(4).交给store的是合并后的总reducer，最后注意在组件中取出状态的时候，记得“取到位”。
		
## 9.初始化state技巧
			使用形参默认值的方式去初始化：xxxxxxReducer(preState=initState,action)

## 10.开发者工具的使用
			(1).yarn add redux-devtools-extension
			(2).store中进行配置
					import {composeWithDevTools} from 'redux-devtools-extension'
					const store = createStore(allReducer,composeWithDevTools(applyMiddleware(thunk)))
## 11.一个组件要和redux“打交道”要经过哪几步？（重要！！！！）
				第一步：定义好UI组件，写好界面与交互
				第二步：引入connect生成一个容器组件，并暴露，代码如下：
								export default connect(
									state => ({key:value}), //映射状态
									{key:xxxxxAction} //映射操作状态的方法
								)(UI组件)
				第三步(非必须)：引入action，如果组件只是读取redux中的数据，不去修改，那么不需要action