Redux 学习笔记

发表于 | 更新于 | 分类于

参考http://cn.redux.js.org
项目中要使用react-redux，在学习的过程中有了这一篇笔记。

核心原则

  • 应用的整个状态树必须被存储在一个单例对象store中。
  • 更新状态树的唯一方法是派发一个action对象来描述发生的情况。
  • 特别需要指出的是，用来处理状态树更新的reducers函数必须是纯函数。

核心概念

强制规定将每一次变化都描述为一个Action对象，使得我们可以清晰的理解程序中发生变化的情况。对于这些变化，清晰的知道为什么变化。Action就像程序中发生变化情况的面包屑。 最后，再通过Reducer方法，将State和Action结合在一起。

三大原则

单一数据源原则

应用的整个状态存储在单例store的对象树中。

状态只读

改变状态树的唯一方式是通过派发action——一个用来描述发生情况的对象

纯函数更改

被称作Reducer的纯函数专门用来响应Action修改状态树。
Reducer是纯函数，接收当前状态和一个Action，并返回修改后的状态。

Action

Action 是把数据从应用传到 store 的有效载荷。 它是 store 数据的唯一来源。
尽量减少在 action 中传递的数据。

Reducer

Action 只是描述了有事情发生了这件事实， 并没有指明应该如何更新 state。而这正是 reducer 要做的事情。

reducer就是一个纯函数， 接收旧的 state 和 action， 返回新的 state。

1
(previousState, action) => newState

永远不要在 reducer 里做这些操作：

  • 修改传入参数；
  • 执行有副作用的操作， 如 API 请求和路由跳转；
  • 调用非纯函数， 如 Date.now() 或 Math.random() 。

谨记 reducer 一定要保持纯净。只要传入参数相同， 返回计算得到的下⼀一 state 就一定相同。 没有特殊情况、 没有副作用， 没有 API 请求、 没有变量修改， 单纯执行计算。

注意：
1.不要修改 state 。
2.在 default 情况下返回旧的 state 。

注意每个 reducer 只负责管理全局 state 中它负责的一部分。 每个 reducer 的 state 参数都不同， 分别对应它管理的那部分 state 数据。

Store

使用 action 来描述“发生了什么”， 使用 reducers 来根据 action 更新 state 的方法。
Store 就是把它们联系到一起的对象。 Store 有以下职责：

  • 维持应用的 state；
  • 提供 getState() 方法获取 state；
  • 提供 dispatch(action) 方法更新 state；
  • 通过 subscribe(listener) 注册监听器;
  • 通过 subscribe(listener) 返回的函数注销监听器。

Redux 应用只有一个单一的 store。

数据流

严格的单向数据流是 Redux 架构的设计核心。

这意味着应⽤中所有的数据都遵循相同的生命周期， 这样可以让应用变得更加可预测且容易理解。 同时也鼓励做数据范式化， 这样可以避免使用多个且独立的方法相互引用的重复数据。

Redux 应用中数据的生命周期遵循下面 4 个步骤：

  • 调用 store.dispatch(action)。
  • Redux store 调用传入的 reducer 函数。
  • 根 reducer 应该把多个子 reducer 输出合并成一个单一的 state 树。
  • Redux store 保存了根 reducer 返回的完整 state 树。

步骤

下面是官网的一个demo

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
import { createStore } from 'redux'

export default function () {
    // 下面这一段代码，就是 https://github.com/reactjs/redux 中的入门demo

    // 第一步：定义计算规则，即 reducer
    function counter(state = 0, action) {
        switch (action.type) {
            case 'INCREMENT':
                return state + 1
            case 'DECREMENT':
                return state - 1
            default:
                return state
        }
    }

    // 第二步：根据计算规则生成 store
    let store = createStore(counter)

    // 第三步：定义数据（即 state）变化之后的派发规则
    store.subscribe(() => {
        console.log('current state', store.getState())
    })

    // 第四步：触发数据变化
    store.dispatch({type: 'INCREMENT'})
    store.dispatch({type: 'INCREMENT'})
    store.dispatch({type: 'DECREMENT'})
}
  • 定义计算规则，即 reducer
  • 根据计算规则生成 store
  • 定义数据（即 state）变化之后的派发规则、
  • 触发数据变化
0%