redux核心
1. 内容回顾
- react-router
2. 学习目标
- 掌握 redux 三大原则
- 掌握 redux 基本应用
- 掌握 react-redux 使用
- 掌握 react-thunk 使用
3. redux概念
- Redux 是一个独立的JavaScript 状态管理库, 非React内容之一
- 链接: https://www.redux.org.cn/.
4. 学习内容
4.1 为什么使用Redux
- Redux 本身是 MVVM渐进式框架,
M(数据模型) - V(视图) - VM(虚拟模型)
4.2 核心概念
理解Redux 几个核心概念与它们之间的关系
- state :存储当前页面自身数据;只读 (所以修改需要用到reducer)
- reducer:管理数据,类似仓库管理员,统一存储所有数据
- store :仓库,存所有state
- action:修改state的新的状态
(1). state对象
通常我们会把应用中的 数据存储 到一个对象树中进行统一管理,我们把这个位置称为: state
- state 是只读的:
这里需要注意的是,为了保证数据状态的可维护性和测试,不推荐直接修改state中的原数据
- 需要通过纯函数修改 state
* 纯函数
a. 什么是纯函数?纯函数 – 函数式编程的一种概念:
- 相同的输入永远返回相同的输出
- 不修改函数的输入值
- 不依赖外部环境状态
- 无任何副作用 (例如:异步请求以及定时器造成的问题)
b. 使用纯函数的好处:
- 便于测试
- 有利于重构
(2). action对象
-
我们对state 的修改是通过reducer 纯函数来进行的,同时通过传入的 action 来执行具体的操作
-
action 是一个对象
-
type 属性: 表示要进行操作的动作类型, 增删改查。。。。
-
payload属性: 操作 state 的同时传入的数据
-
但是这里需要注意的是,我们不直接去调用Reducer函数,而是通过Store对象提供的dispatch方法来调用
(3). Store对象 (负责存储的仓库)
- 为了对 steta, reducer, action,进行统一的管理和维护,我们需要创建一个Store对象(仓库)
4.3 redux 三大原则
-
单一数据源: 整个应用的state 被储存在一棵 obeject tree中,并且这个object tree 只存在于 唯一的store 中
-
State 是只读的,唯一改变state的方法就是触发 action,action是一个用于描述已发生事件的普通对象
-
使用纯函数来进行修改
4.4 redux 基本应用
1). 安装
npm i redux
2). 引入
import {
createStore } from 'redux'
3). 创建一个仓库,在仓库中对状态进行管理,参数为一个纯函数
let store = createStore(reducer);
4). reducer 纯函数
-
因为 state 是只读的,所以需要一个纯函数去修改内部的值
-
reducer 代表仓库管理员
-
state 后面可以加默认值,也可以不加
-
reducer 也是我们自己起的名字,符合见名知意即可
-
格式:
function reducer(state=默认值,action){ return state; } 参数1:state 的初始值,可以是外界传进来的值,也可以是默认值 参数2:action -- 修改值
function reducer(state={
name:"电影院",
age:20
},action){
return state;
}
let store = createStore(reducer); //传函数体进去,不是传函数调用
console.log(store);
在控制台输出仓库,可以看到一个对象,其中包含几个方法:
方法1. getState 获取状态
getState: ƒ getState() -- 获取状态
代码示例:
console.log(store.getState());
浏览器输出:
方法2. dispatch 修改