React-5.1 Redux 之 状态管理库 -- 核心api

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. 什么是纯函数？纯函数 – 函数式编程的一种概念：

1. 相同的输入永远返回相同的输出
2. 不修改函数的输入值
3. 不依赖外部环境状态
4. 无任何副作用 (例如：异步请求以及定时器造成的问题)

b. 使用纯函数的好处：

1. 便于测试
2. 有利于重构

(2). action对象

• 我们对state 的修改是通过reducer 纯函数来进行的，同时通过传入的 action 来执行具体的操作

• action 是一个对象

• type 属性： 表示要进行操作的动作类型， 增删改查。。。。

• payload属性： 操作 state 的同时传入的数据

• 但是这里需要注意的是，我们不直接去调用Reducer函数,而是通过Store对象提供的dispatch方法来调用

(3). Store对象 (负责存储的仓库)

• 为了对 steta, reducer, action,进行统一的管理和维护，我们需要创建一个Store对象(仓库)

---

4.3 redux 三大原则

1. 单一数据源： 整个应用的state 被储存在一棵 obeject tree中，并且这个object tree 只存在于 唯一的store 中

2. State 是只读的，唯一改变state的方法就是触发 action，action是一个用于描述已发生事件的普通对象

3. 使用纯函数来进行修改

---

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 修改