React Redux 的初學者詳盡指南

前端小學生董某發表於2020-04-03
ReactRedux

什麼是 Redux？

Redux 官網redux.js.org 首頁的定義，清晰簡單：

A Predictable State Container for JS Apps

維基百科給出的定義：Redux一個用於應用程式狀態管理的開源JavaScript庫。Redux經常與React搭配運用，但其也可以獨立使用。

Redux是目前React生態中，最好的資料層框架

官網給出瞭如下四個關鍵詞及對應的說明：

  1. Predictable

    Redux helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.

  2. Centralized

    Centralizing your application's state and logic enables powerful capabilities like undo/redo, state persistence, and much more.

  3. Debuggable

    The Redux DevTools make it easy to trace when, where, why, and how your application's state changed. Redux's architecture lets you log changes, use "time-travel debugging", and even send complete error reports to a server.

  4. Flexible

    Redux works with any UI layer, and has a large ecosystem of addons to fit your needs.

Redux 是一個用來管理資料狀態和UI狀態的 JavaScript 應用工具。隨著 JavaScript 單頁應用開發日趨複雜，JavaScript 需要管理比任何時候都要多的 state（狀態），Redux 就是降低管理難度的。（Redux 支援 React、Angular、jQuery 甚至純 JavaScript）

Redux 誕生的背景

隨著 JavaScript 單頁應用開發日趨複雜，JavaScript 需要管理比任何時候都要多的 state （狀態）。 這些 state 可能包括伺服器響應、快取資料、本地生成尚未持久化到伺服器的資料，也包括 UI 狀態，如啟用的路由，被選中的標籤，是否顯示載入動效或者分頁器等等。

管理不斷變化的 state 非常困難。如果一個 model 的變化會引起另一個 model 變化，那麼當 view 變化時，就可能引起對應 model 以及另一個 model 的變化，依次地，可能會引起另一個 view 的變化。直至你搞不清楚到底發生了什麼。state 在什麼時候，由於什麼原因，如何變化已然不受控制。 當系統變得錯綜複雜的時候，想重現問題或者新增新功能就會變得舉步維艱。

歷史和發展

這個 PPT 中給出了詳細的歷史發展程式： blog.isquaredsoftware.com/presentatio…

Created by Dan Abramov for a talk at React Europe 2015 to demonstrate the idea of "time-travel debugging". Now the most widely used state management tool for React apps.

Redux 執行環境的配置

首先要確保我們已經安裝了node.js、NPM以及React 然後在命令列中鍵入：

npm install --save redux --global
npm install --save react-redux --global
npm install --save-dev redux-devtools -global
複製程式碼

在下載過程中如果遇到不便可以把npm替換為cnpm；或配置淘寶映象

環境配置往往是勸退的一步，很痛苦，但是要有耐心，要敢於面對問題

檢視下載好的 Redux 的資訊

命令列鍵入：

npm info redux
複製程式碼

可以看到以下資訊：

redux@4.0.5 | MIT | deps: 2 | versions: 66
Predictable state container for JavaScript apps
http://redux.js.org

dist
.tarball: https://registry.npm.taobao.org/redux/download/redux-4.0.5.tgz
.shasum: 4db5de5816e17891de8a80c424232d06f051d93f

dependencies:
loose-envify: ^1.4.0      symbol-observable: ^1.2.0

maintainers:
- acdlite <npm@andrewclark.io>
- gaearon <dan.abramov@gmail.com>
- timdorr <timdorr@timdorr.com>

dist-tags:
latest: 4.0.5     next: 4.0.0-rc.1

published 3 months ago by timdorr <timdorr@timdorr.com>
複製程式碼

可以說明兩點：

  1. Redux 執行的環境已經成功配置
  2. 已下載的就是最新版本4.0.5

三大原則

Single source of truth

The state of your whole application is stored as a tree of plain objects and arrays within a single store. (How much you put in the store is up to you - not all data needs to live there.)

State is read-only

State updates are caused by dispatching an action, which is a plain object describing what happened. The rest of the app is not allowed to modify the state tree directly.

Changes are made with pure functions

All state updates are performed by pure functions called reducers, which are (state, action) => newState

Reducer 和 action

首先應該瞭解 State 的概念和 Redux 中 state 的特點

App state is stored in plain objects, like this Todo example. There's no "setters", so that different parts of the code can’t change the state arbitrarily. That helps avoid hard-to-reproduce bugs.

Actions

To change something in the state, you need to dispatch an action. An action is a plain JS object with a type field. Action

Action 是把資料從應用傳到 store 的有效載荷。它是 store 資料的唯一來源。一般來說我們要通過 store.dispatch() 將 action 傳到 store

Actions 的格式非常自由。只要它是個帶有 type 屬性的物件就可以了。也正因為格式如此自由，所以事實上他們什麼也做不了，為了讓 action 做點事情，你需要 dispatch。

Action Creators

It is common to use action creator functions to encapsulate the process of creating action objects. This may seem like overkill for simple use cases, but consistent use of action creators leads to cleaner code and better reusability. Action creators are not required, but are a good practice. 。

Reducer

Reducers 指定了應用狀態的變化如何響應 actions 併傳送到 store 的，記住 actions 只是描述了有事情發生了這一事實，並沒有描述應用如何更新 state。Reducer 一定要保持純淨。只要傳入引數相同，返回計算得到的下一個 state 就一定相同。沒有特殊情況、沒有副作用，沒有 API 請求、沒有變數修改，單純執行計算。

Redux 提供了一個 store 統一倉儲庫，元件通過dispatch將 state 傳入 store，不用通過其他元件，並且元件通過subscribe從 store 獲得到 state 的改變

Image text

在各個元件 state 改變的過程當中，Redux 不允許應用直接修改 state，而是要求使用載體 action 來描述 state 的變化，通過傳送 action 到 store 來改變 state。action 如何改變 stroe？為了描述 action 如何改變 state tree ，我們需要編寫 reducer

Reducer 只是一些純函式，它接收先前的 state 和 action，並返回新的 state：

var someReducer = function(state,action){
    ...
    return state
}
複製程式碼

相關文章