Redux 浅析 - 基础知识、单向数据流、使用方法

Redux 浅析 - 基础知识、单向数据流、使用方法

目录

Redux 浅析 - 基础知识、单向数据流、使用方法

1. Redux 基本概念

1.1 （3W问题简单）什么是Redux？为啥用它？何时使用？

1.2 术语：状态管理 State Management

1.2.1 通过一个简单的例子来理解状态管理。

1.2.2 简易“单向数据流”暴露出的问题

1.3 术语：不变性 Immutability

1.4 术语：Actions / Action Creators   动作 / 动作制造器（相当于一种事件）

Actions

Action Creators

1.5 术语：Reducers 减少器/约简器（相当于事件监听器）

Reducer名字的由来

Reducer简介

1.6 术语：Store / Dispatch / Selectors

Store【仓库、贮存所】

Dispatch【派遣、发送、调度】（相当于触发一个事件）

Selectors

1.7 Redux应用数据流

2. Redux的使用

3. 异步action

4. 中间件

---

参考资料： Redux·自述 （英文版点这里）

1. Redux 基本概念

1.1 （3W问题简单）什么是Redux？为啥用它？何时使用？

• What？什么是Redux？
  • 一个库，也是一种模式；redux是跨框架的，但是最常和react一起用（这需要react-redux工具）
  • 它的作用是：通过“actions”事件，来管理和更新app的状态（state）；
  • 它提供了全局状态管理，并规定了更新状态的方式。
• Why？为啥用它？
  • 如果有多个不同的组件需要用同一个状态，那么我们需要一个全局状态供它们使用。
  • Redux帮助我们把状态从组件中抽离，不再需要多层传入到不同组件。
• When？何时用它？
  • 应用程序中有大量的state需要管理。
  • 这些状态频繁更新。
  • 更新状态的逻辑可能很复杂。（并不是counter那种“点击则加一”简单逻辑）

参考 What is Redux

---

1.2 术语：状态管理 State Management

1.2.1 通过一个简单的例子来理解状态管理。

参考资料：Redux Terms and Concepts

• 下方代码块中，展示了一个React计数器组件。它在counter state中记录数字，在button每次被点击时对该数字增加1.
• 在这个组建中，理解View、Actions、State的含义。

State（状态）	State是描述了App在某一刻的情况。【比如被点了25下】
View	View是UI描述，而且这个描述是基于当前的state的。【显示Value: {counter}】
Actions	Actions是基于用户输入的事件，它们会触发state的更新。【onClick】

// copyied from https://redux.js.org/tutorials/essentials/part-1-overview-concepts#state-management
function Counter() {
  // State: a counter value
  const [counter, setCounter] = useState(0)

  // Action: code that causes an update to the state when something happens
  const increment = () => {
    setCounter(prevCounter => prevCounter + 1)
  }

  // View: the UI definition
  return (
    <div>
      Value: {counter} <button onClick={increment}>Increment</button>
    </div>
  )
}

• 上方的counter组件便是一个简单的“单向数据流” ( one-way data flow )的例子。
  • State描述app在某一刻的情况；
  • UI 基于state而渲染。；
  • 当一些事发生了（比如点击了button），state会基于这些事情而更新。
  • UI 基于新state而重新渲染。

One-way data flow

 

1.2.2 简易“单向数据流”暴露出的问题

• 问题：如果存在多个组件，它们需要分享和使用同一个state，需要怎么做？
• 解决方法：把state提升到父级组件内。
• 此解决方案的缺陷：