一 、Redux 是 JavaScript 应用的状态容器,提供可预测的状态管理。
不使用 Redux :
-
只能使用父子组件通讯、状态提升等 React 自带机制
-
处理远房亲戚(非父子)关系的组件通讯时乏力
-
组件之间的数据流混乱,出现 Bug 时难定位
使用 Redux :
-
集中式存储和管理应用的状态
-
处理组件通讯问题时,无视组件之间的层级关系
-
简化大型复杂应用中组件之间的通讯问题
-
数据流清晰,易于定位 Bug
二、Redux 三个核心概念
1.action :一个js对象,包含两个属性
type: 标识属性,值是字符串。多个type用action分开;
payload:数据属性,可选。表示本次动作携带的数据;
注意:actions 只是描述了有事情发生了这一事实,并没有描述应用如何更新 state。
特点:只描述做什么,JS 对象,必须带有 type 属性,用于区分动作的类型
根据功能的不同,可以携带额外的数据,配合该数据来完成相应功能。
2.reducer: 一个纯函数
作用:初始化状态、修改状态,根据传入的旧状态和action,返回新状态。
注意:公式:(previousState, action) => newState
3.store
store:仓库,Redux 的核心,整合 action 和 reducer
特点:
1、一个应用只有一个 store。
2、维护应用的状态,获取状态:store.getState()。
3、创建 store 时接收 reducer 作为参数:const store = createStore(reducer)。
4、发起状态更新时,需要分发 action:store.dispatch(action)
5、其他 API如下:
----a、 订阅(监听)状态变化:const unSubscribe = store.subscribe(() => {})
----b、 取消订阅状态变化: unSubscribe()
网友评论