1.redux 理解

1.1.redux 是什么

1. redux是一个专门用于做状态管理的JS库(不是react插件库)。
2. 它可以用在react, angular, vue等项目中, 但基本与react配合使用。
3. 作用: 集中式管理react应用中多个组件共享的状态。

1.2. 什么情况下需要使用redux

1. 某个组件的状态，需要让其他组件可以随时拿到（共享）。
2. 一个组件需要改变另一个组件的状态（通信）。
3. 总体原则：能不用就不用, 如果不用比较吃力才考虑使用。

1.3. redux工作流程

• Components 告诉 Action Creators 要执行的动作， Action Creators 可以有多个，它会创建一个动作对象 action，包含要执行的动作类型和动作数据，交由 dispatch 进行分发，dispatch会交给store，store 相当于一个管理者，管理各个部分，store 将 action 和 previousState 传递给 Reducers ，Reducers 加工状态执行要操作的动作对象，返回一个新的 state ，交还给 store，组件可以通过 getState() 方法得到 redux 管理的状态.

2. redux的三个核心概念

2.1. action

1. 动作的对象：创建 Action ，表示一个动作对象，将 action 交由 dispatch 方法，一个函数返回 Action 的方法
2. 包含2个属性
   • type：标识属性, 值为字符串, 唯一, 必要属性（初始化的时候为@@init@@）
   • data：数据属性, 值类型任意, 可选属性（初始化时不传该属性）
3. 例子：{ type: ‘ADD_STUDENT’,data:{name: ‘tom’,age:18} }

2.2. reducer

1.用于初始化状态（只执行一次）、加工状态。
2.加工时，根据旧的state（初始化时为 undefined）和action， 产生新的state的纯函数。

2.3. store

1.将state、action、reducer联系在一起的对象

2.如何得到此对象?

• 1)import {createStore} from ‘redux’
• 2)import reducer from ‘./reducers’
• 3)const store = createStore(reducer)

3.此对象的功能?

• 1)getState(): 得到state
• 2)dispatch(action): 分发action, 触发reducer调用, 产生新的state
• 3)subscribe(listener): 注册监听, 当产生了新的state时, 自动调用

3.react-redux

3.1 容器组件：

3.1.1 作用：

利用react-redux 创建 ，是一个桥梁用于链接UI组件和Redux（store），使用connect()()创建并暴露一个Count的容器组件，在UI组件中就可以用 props 接收状态；并且不需要再检测组件处是否重新渲染，connect 会根据状态的改变，自动渲染组件

3.1.2 connect 方法：

connect(mapStateToProps,mapDispatchToProps)(CountUI)）：

mapStateToprops 方法用于映射状态；

​ 1.mapStateToProps函数返回的是一个对象；

2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value3.mapStateToProps用于传递状态

mapDispatchToProps 方法用于映射操作状态的方法

​ 1.mapDispatchToProps函数返回的是一个对象；

2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value3.mapDispatchToProps用于传递操作状态的方法

3.2 react-redux基本使用

(1).明确两个概念：

​ 1).UI组件:不能使用任何redux的api，只负责页面的呈现、交互等。

​ 2).容器组件：负责和redux通信，将结果交给UI组件。

(2).如何创建一个容器组件————靠react-redux 的 connect函数

​ connect(mapStateToProps,mapDispatchToProps)(UI组件)

​ -mapStateToProps:映射状态，返回值是一个对象

​ -mapDispatchToProps:映射操作状态的方法，返回值是一个对象

(3).备注1：容器组件中的store是靠props传进去的，而不是在容器组件中直接引入

(4).备注2：mapDispatchToProps，也可以是一个对象（简写方式只需要写 action 即可，react-redux 会帮助我们调用 dispatch 分发，例： increase: createIncrementAction）

3.3 _react-redux优化

(1).容器组件和UI组件整合一个文件(2).无需自己给容器组件传递store，给<App/>包裹一个<Provider store={store}>即可。(3).使用了react-redux后也不用再自己检测redux中状态的改变了，容器组件可以自动完成这个工作。(4).mapDispatchToProps也可以简单的写成一个对象(5).一个组件要和redux“打交道”要经过哪几步？​       	(1).定义好UI组件---不暴露​       	(2).引入connect生成一个容器组件，并暴露，写法如下：​         	connect(​          		state => ({key:value}), //映射状态​          		{key:xxxxxAction} //映射操作状态的方法​         	)(UI组件)​      	 (4).在UI组件中通过this.props.xxxxxxx读取和操作状态

3.4 react-redux数据共享版

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

3.5 react-redux开发者工具的使用

​ (1).yarn add redux-devtools-extension
​ (2).store中进行配置
​ import {composeWithDevTools} from ‘redux-devtools-extension’
​ const store = createStore(allReducer,composeWithDevTools(applyMiddleware(thunk)))

3.6 react-redux最终版

	(1).所有变量名字要规范，尽量触发对象的简写形式。(2).reducers文件夹中，编写index.js专门用于汇总并暴露所有的reducer