# redux_study_0415

**Repository Path**: tianyucoder/redux_study_0415

## Basic Information

- **Project Name**: redux_study_0415
- **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-07-22
- **Last Updated**: 2021-07-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 1.求和案例_redux精简版
		(1).去除Count组件自身的状态
		(2).src下建立:
						-redux
							-store.js
							-reducer.js
	
		(3).store.js：
					1).引入redux中的createStore函数，创建一个store
					2).createStore调用时要传入一个为其服务的reducer
					3).记得暴露store对象
	
		(4).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只负责管理状态，至于状态的改变驱动着页面的展示，要靠我们自己写。


## 2.求和案例_redux完整版
		新增文件：
			1.action.js 专门用于创建action对象
			2.constant.js 放置容易写错的type值

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

## 4.求和案例_数据共享版
			(1).定义一个Pserson组件，和Count组件通过redux共享数据。
			(2).为Person组件编写：reducer、action，配置constant常量。
			(3).重点：Person的reducer和Count的Reducer要使用combineReducers进行合并，
					合并后的总状态是一个对象！！！
			(4).交给store的是总reducer，最后注意在组件中取出状态的时候，记得“取到位”。

## 5.求和案例_开发者工具的使用
	(1).yarn add redux-devtools-extension
	(2).store中进行配置
			import {composeWithDevTools} from 'redux-devtools-extension'
			const store = createStore(allReducer,composeWithDevTools(applyMiddleware(thunk)))