redux与react-redux

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个属性
3. type：标识属性, 值为字符串, 唯一, 必要属性（初始化的时候为@@init@@）
4. data：数据属性, 值类型任意, 可选属性（初始化时不传该属性）
5. 例子：{ 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的value

3.mapStateToProps用于传递状态

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

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

2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value

3.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