Redux学习

目录

1. Redux-概念

解释：

React的问题：

背景介绍：

为什么需要Redux?

 2. Redux-核心要素

1.知道三个核心概念是什么

2.三个核心概念的职责分别是什么 

3.类比生活 

 3.Redux-核心action

解释：

特点：

总结：

4. Redux-核心action creator 

1.知道 action creator 是什么意思

2.知道 action creator 的优点

总结：

5. Redux-核心reducer 

解释：

作用：

原则：

总结：

6. 纯函数&JS副作用 

纯函数：

JS副作用：

7. Redux-核心store

内容：

核心代码

8. Redux-默认值由来 

内容：

代码：

9. Redux-执行过程分析

内容：

1. Redux-概念

 能够说出为什么需要使用Redux

文档：

• redux 中文文档
• redux 英文文档

解释：

• Redux 是 React 中最常用的状态管理工具（状态容器）

React的问题：

• React 只是 DOM 的一个抽象层（UI 库），并不是 Web 应用的完整解决方案。
• 因此 React 在涉及到数据的处理以及组件之间的通信时会比较复杂 。
• 对于大型的复杂应用来说，这两方面恰恰是最关键的，需要一个专门的状态工具。

背景介绍：

• 2014 年 Facebook 提出了 Flux 架构的概念（前端状态管理的概念），引发了很多的实现
• 2015 年，Redux 出现，将 Flux 与函数式编程结合一起，很短时间内就成为了最热门的前端架构
• Flux 是最早的前端的状态管理工具，它提供了状态管理的思想，也提供对应的实现
• 除了 Flux、Redux 之外，还有：Mobx 等状态管理工具

为什么需要Redux?

• 不使用 Redux (图左边) ：
  • 只能使用父子组件通讯、状态提升等 React 自带机制
  • 处理远房亲戚(非父子)关系的组件通讯时乏力
  • 组件之间的数据流混乱，出现 Bug 时难定位
• 使用 Redux (图右边)：
  • 集中式存储和管理应用的状态
  • 处理组件通讯问题时，无视组件之间的层级关系
  • 简化大型复杂应用中组件之间的通讯问题
  • 数据流清晰，易于定位 Bug

 2. Redux-核心要素

知道Redux的三个核心概念的职责 

大致步骤：

• 知道三个核心概念是什么
• 三个核心概念的职责分别是什么

具体内容：

1.知道三个核心概念是什么

• 为了让代码各部分职责清晰、明确，Redux 代码被分为三个核心概念：action/reducer/store

2.三个核心概念的职责分别是什么 

• action -> reducer -> store
• action（动作）：描述要做的事情
• reducer（函数）：更新状态
• store（仓库）：整合 action 和 reducer

3.类比生活 

• action：相当于公司中要做的事情，比如软件开发、测试，打扫卫生等
• reducer：相当于公司的员工，负责干活的
• store：相当于公司的老板
• 流程：老板(store)分配公司中要做的事情(action)给员工(reducer)，员工干完活把结果交给老板

 3.Redux-核心action

能够定义一个最基本的action 

解释：

• action 行动（名词）、动作
• 描述要做的事情，项目中的每一个功能都是一个 action
• 例如：
  • 计数器案例：计数器加1、减1
  • 购物车案例：获取购物车数据、切换商品选中状态
  • 项目：登录，退出等

特点：

• action 只描述做什么事情
• action 是一个JS对象，必须带有 type 属性，用于区分动作的类型
• 根据功能的不同，可以携带额外的数据（比如，payload 有效载荷），配合该动作来完成相应功能

举例：

// 计数器案例
{ type： 'increment' } // +1
{ type： 'decrement' } // -1

// 累加10操作
{ type：