redux

redux简介

1.redux是一个专门用于做状态管理的JS库(不是react插件库)。

2.它可以用在react, angular, vue等项目中, 但基本与react配合使用。

3.作用: 集中式管理react应用中多个组件共享的状态。

redux使用场景

1.数据共享：某个组件的状态，需要让其他组件可以随时拿到（共享）。

2.组件间通信：一个组件需要改变另一个组件的状态（通信）。

理解

redux的三个核心概念之action

1.Action内部的作用为合成动作对象，在Action内部可执行异步操作。

2.action对象---在修改数据时的动作对象

3.action对象包含2个属性

• type：标识属性, 值为字符串, 唯一, 必要属性 （要干什么）
• data：数据属性, 值类型任意, 可选属性（需要的数据）

redux的三个核心概念之reducer

1.reducer用于初始化状态、加工状态。

2.加工时，根据旧的state和action， 产生新的state的纯函数。

redux的三个核心概念之store

1.store将state、action、reducer联系在一起

2.内部调用createStore()创建store对象

3.store对象的内部方法:

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

redux异步编程

1.redux默认是不能进行异步处理的

2.某些时候应用中需要在redux中执行异步任务(ajax, 定时器)

3.使用redux-thunk中间件实现异步:npm install --save redux-thunk

react-redux

1.一个react插件库，专门用来简化react应用中使用redux

2.react-Redux将所有组件分成两大类

内容组件
1)只负责内容的呈现，不带有任何业务逻辑
2)通过props接收数据(一般数据和函数)
3)不使用任何 Redux 的 API
4)一般保存在components文件夹下

容器组件
1)负责管理数据和业务逻辑，不负责UI的呈现
2)使用 Redux 的 API
3)一般保存在containers文件夹下

react-Redux相关API

(1).Provider：让所有组件都可以得到state数据

(2).connect：用于包装 UI 组件生成容器组件

(3).mapStateToprops：将外部的数据（即state对象）转换为UI组件的标签属性

(4).mapDispatchToProps：将分发action的函数转换为UI组件的标签属性