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

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）变化之后的派发规则、
触发数据变化