写一个大背景吧：

我为什么会去学习这个 Redux ？或许是因为我在使用 React hooks 中的 useReducer 时突然被刺激到了吧～的确仿照官网 demo，都可以用上这些 API，但我却从来不理解我为什么要去用？何时去用？我想着，是时候去学习了 Redux 了吧～

好了～开始记录学习过程吧～

相关文档

---

• Redux 中文文档
• Redux 英文文档
  
  
  
  

Redux 介绍

---

1. 理解它存在的意义

比如有个页面组件树类似这个样子，一个层级特别深的 O 组件，更改后要去同步更改 A 组件。在传统的 React 中，将 props 层层传递，似乎可以解决问题～那么继续假设，随着业务增加，组件树变得日益壮大，组件之间的联系变得更加紧密，某一天你会突然发现，自己似乎已经不清楚组件之间的 state 是如何变化更新的。而你也无法预料到，修改这个组件的 state 之后，下一刻，别的地方又会发生什么？Redux 就是为了解决这个问题的，它试图让 state 的变化变得可预测。

2. 什么时候使用呢？

那么这里我直接引入官方文档的这篇 when-should-i-use-redux，原文是英文的，所以我稍微翻译了一下；大体是以下几个情况：

• 在 App 中，有许多应用页面的 state 需要在多处使用。
• App 中的 state 频繁需要更新。
• 更新 state 的逻辑很复杂。
• App 具有中等或大型的代码库，并且是多人开发的。
• 你需要知道 state 随着时间变化是如何在更新的。

然后就可以自主选择是否真正需要去使用 Redux 啦～如果你只是想多学一门技术，当然也是可以哒～

Redux 三大原则

---

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

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

• 使用纯函数来执行修改
  为了描述 action 如何改变 state tree ，你需要编写 reducers。
  
  
  

Redux 工作流程图

---

对于这张工作流程图，我在网上参考了很多，最后这种展示我认为是比较好理解的。或许一开始，还是会觉着陌生，但是随着学习的深入，就会越来越理解。

简单解释一下吧：
对于页面上的组件，需要进行更新时。我们需要主动去发起一个 action，调用 dispatch(action)，来通知到 Store。Store 自动会去触发 reducer，根据之前的 state 和传入的 action，进行相关处理后，就会返回一个新的 state。而组件呢，就会根据最新的 getState()进行页面展示。

Redux 核心介绍

---

1. Action

本质是一个 JS 的对象，类似 {type: 'Add'}。其中 type 属性是必须的，它定义了当前的操作的类型，例如是添加，修改等等。除了 type 字段呢，其它的字段结构，可以由自己决定。
这里呢，我拿添加一个 Todo 进行举例：

  // define action type
  const ADD_TODO = 'ADD_TODO';

  // define action creator function
  const addTodo = (text) => {
    return {
      type: ADD_TODO,
      text
    }
  }

  // trigger by clicking button
  const clickAddButton = () => {
    const action = addTodo('add the first todo')
    dispatch(action)
  }

是不是很简单，其实主要的就是那一句话dispatch(action)，其余的代码只是提了一个常量和封了一个方法而已。

2. Reducer

首先明确一点，它是一个纯函数。它接收旧的 state 和 action，返回新的 state。形如 (prevState, action) => newState

纯函数定义：
1. 如果函数的调用参数相同，则永远返回相同的结果。 它不依赖于程序执行期间函数外部任何状态或数据的变化，必须只依赖于其输入参数。
2. 该函数不会产生任何可观察的副作用，例如网络请求，输入和输出设备或数据突变（mutation）。

在上一步中，用户发起了添加一个 todo 操作之后，redux 会自动去调用这个 reducer 方法，它通常长这样哦：

  // define initial state
  const initialState = { 
      todos: []
  }
  
  /* @params 
   * state: get previous state here
   * action: dispatch params, defined by user
  */
  function reducer(state = initialState, action) {
   switch (action.type) {
     case ADD_TODO:
       return Object.assign({}, state, {
         todos: [
           ...state.todos,
           {
             text: action.text,
             completed: false
           }
         ]
       })
     default:
       return state
   }
 }

3. Store

再次强调一下 Redux 应用只有一个单一的 store。它有以下职责：

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

通常创建一个 store 非常的简单方便；

  import { createStore } from 'redux'
  // reducer is defined last step
  const store = createStore(reducer)

目前为止，我想说的一些关于 redux 的前期知识储备已经结束。初次接触，肯定还是会很混乱。个人一直很想整理一篇实战部分的练习，但是无奈自己太懒惰了，以及不懂咋整理，就先这样搁置着了... 【下次一定？？？】