1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
| 要想更新 state 中的数据，你需要发起一个 action。action 就是一个普通 JavaScript 对象
强制使用 action 来描述所有变化带来的好处是可以清晰地知道应用中到底发生了什么,action 就像是描述发生了什么的指示器,为了把 action 和 state 串起来，开发一些函数，这就是 reducer,reducer 只是一个接收 state 和 action，并返回新的 state 的函数,
单向数据流
当我们有多个组件需要共享和使用相同state时，可能会变得很复杂，尤其是当这些组件位于应用程序的不同部分时, 有时这可以通过 提升state 到父组件来解决，但这并不总是有效，解决这个问题的一种方法是从组件中提取共享 state，并将其放入组件树之外的一个集中位置。这样，我们的组件树就变成了一个大“view”，任何组件都可以访问 state 或触发 action，无论它们在树中的哪个位置，通过定义和分离 state 管理中涉及的概念并强制执行维护 view 和 state 之间独立性的规则，代码变得更结构化和易于维护，
这就是 Redux 背后的基本思想：
应用中使用集中式的全局状态来管理，并明确更新状态的模式，以便让代码具有可预测性
Redux 期望所有状态更新都是使用不可变的方式
action 是一个具有 type 字段的普通 JavaScript 对象。可以将 action 视为描述应用程序中发生了什么的事件
type 字段是一个字符串，给这个 action 一个描述性的名字，比如"todos/todoAdded"。我们通常把那个类型的字符串写成“域/事件名称”，其中第一部分是这个 action 所属的特征或类别，第二部分是发生的具体事情，action 对象可以有其他字段，其中包含有关发生的事情的附加信息。按照惯例，我们将该信息放在名为 payload 的字段中
action creator 是一个创建并返回一个 action 对象的函数。它的作用是让你不必每次都手动编写 action 对象
reducer 是一个函数，接收当前的 state 和一个 action 对象，必要时决定如何更新状态，并返回新状态。函数签名是：(state, action) => newState。 你可以将 reducer 视为一个事件监听器，它根据接收到的 action（事件）类型处理事件
Reducer 必需符合以下规则：
1.仅使用 state 和 action 参数计算新的状态值
2.禁止直接修改 state。必须通过复制现有的 state 并对复制的值进行更改的方式来做 不可变更新
3.禁止任何异步逻辑、依赖随机值或导致其他“副作用”的代码
Store
当前 Redux 应用的状态存在于一个名为 store 的对象中
store 是通过传入一个 reducer 来创建的，并且有一个名为 getState 的方法，它返回当前状态值
Dispatch
Redux store 有一个方法叫 dispatch。更新 state 的唯一方法是调用 store.dispatch() 并传入一个 action 对象。 store 将执行所有 reducer 函数并计算出更新后的 state，调用 getState() 可以获取新 state
dispatch 一个 action 可以形象的理解为 "触发一个事件"。发生了一些事情，我们希望 store 知道这件事。 Reducer 就像事件监听器一样，当它们收到关注的 action 后，它就会更新 state 作为响应
Selector 函数可以从 store 状态树中提取指定的片段。随着应用变得越来越大，会遇到应用程序的不同部分需要读取相同的数据，selector 可以避免重复这样的读取逻辑
Redux (单向)数据流
初始启动: 使用最顶层的 root reducer 函数创建 Redux store, store 调用一次 root reducer，并将返回值保存为它的初始 state, 当 UI 首次渲染时，UI 组件访问 Redux store 的当前 state，并使用该数据来决定要呈现的内容。同时监听 store 的更新，以便他们可以知道 state 是否已更改
更新环节: 应用程序中发生了某些事情，例如用户单击按钮, 然后dispatch 一个 action 到 Redux store,store 用之前的 state 和当前的 action 再次运行 reducer 函数，并将返回值保存为新的 state,store 通知所有订阅过的 UI，通知它们 store 发生更新,每个订阅过 store 数据的 UI 组件都会检查它们需要的 state 部分是否被更新, 发现数据被更新的每个组件都强制使用新数据重新渲染，紧接着更新网页
用 Thunk 编写异步逻辑
thunk 是一种特定类型的 Redux 函数，可以包含异步逻辑。Thunk 是使用两个函数编写的
一个内部 thunk 函数，它以 dispatch 和 getState 作为参数, 外部创建者函数，它创建并返回 thunk 函数
Actions 是用来描述在 app 中发生了什么的普通对象，并且是描述突变数据意图的唯一途径。很重要的一点是 不得不 dispatch 的 action 对象并非是一个样板代码，而是 Redux 的一个 基本设计原则
三大原则
1.单一数据源
2.State只读
3.使用纯函数来执行修改
|