Redux 學習筆記02——Redux 的基本元素

Redux 的基本元素

想要使用Redux，必需要掌握其中的幾個必要元素：Store、State、Action、Reducer。下面咱們會依次介紹這幾個元素：

咱們仍是以上一篇博客中提到的圖書館的例子做爲基礎：一個圖書館中有不少書，圖書館有管理員，咱們若是想要找書的時候，能夠詢問管理員書的具體位置，方便咱們快速拿到這本書；咱們想要借書或還書的時候，能夠將書交給管理員，而且初始本身的借書卡，讓管理員幫助咱們準確地登記，並將歸還的書放在準確地位置上。

大體明白了圖書館的例子，咱們開始介紹Redux的這幾個基本的元素。

Redux 元素的詳細介紹

這一節咱們重點是介紹Redux，讓你們對Redux有一個形象的認識。若是你對出現的代碼不理解的話，先不要糾結，明白各個元素是怎麼會是就好了。下一節咱們會詳細講解Redux的使用，那裏會對代碼詳細說明。

1. Store

Store 就是保存數據的地方，你能夠把它當作一個容器，整個應用只能有一個 Store。Redux 提供createStore這個函數，用來生成 Store。

import { createStore } from 'redux';
const store = createStore(fn);
複製代碼

在圖書館的例子中，整個圖書館就是一個 Store， 裏面存放着大量的書籍。

2. State

Store對象包含全部數據。若是想獲得某個時刻的數據，就要對 Store 生成快照。這種時刻的數據集合，就叫作 State。

當前時刻的所有 State，能夠經過store.getState()拿到。

import { createStore } from 'redux';
const store = createStore(fn);

const state = store.getState();
複製代碼

在圖書館的例子中，圖書館中某一時刻的書籍狀況，對應的就是圖書館這一時刻的State。其實這裏咱們徹底能夠把State翻譯成 狀態， 這更便於咱們理解。

好比我說：2019年下午14：00的時候，圖書館的狀態。那麼你就會很清楚地知道我表達地意思是：在2019年下午14：00，圖書館有多少本書籍在館，在館的書籍都是放在哪一個位置；有多少本書籍已經借出，借出的書籍在哪些人手中等等。

再來看實際項目中的State，Redux管理的數據不少，並且這些數據會發生變化。若是咱們想在一個組件渲染的時候，拿到Redux中當前的數據顯示在頁面上，那麼咱們就可使用 store.getState() 獲取這個時刻的數據，而後在組件中進行數據的渲染。在另一個時刻，數據發生了變化，若是咱們再次使用 store.getState() 獲取數據渲染組件，那麼就會獲得不一樣的頁面。

Redux 規定， 一個 State 對應一個 View。只要 State 相同，View 就相同。你知道 State，就知道 View 是什麼樣，反之亦然。

3. Action

State 的變化，會致使 View 的變化。可是，用戶接觸不到 State，只能接觸到 View。因此，State 的變化必須是 View 致使的。Action 就是 View 發出的通知，表示 State 應該要發生變化了。

Action 是一個對象。其中的type屬性是必須的，表示 Action 的名稱。其餘屬性能夠自由設置，社區有一個規範能夠參考。

const action = {
    type: 'borrow_book',
    title: '《明朝那些事兒》'
};
複製代碼

上面代碼中，Action 的名稱是borrow_book，它攜帶的信息是字符串《明朝那些事》。

能夠這樣理解，Action 描述當前發生的事情。改變 State 的惟一辦法，就是使用 Action。它會運送數據到 Store，而後Store會經過一系列方式對數據進行改變。

回到圖書館的例子中：在圖書館中，咱們做爲讀者沒有權限獲取和修改圖書館的數據，只能將咱們的請求告訴圖書館，而後圖書館中的管理員就會來獲取或者修改圖書館的數據，而後告訴咱們。

好比咱們發出一個請求：我要找書，我要找的書是《明朝那些事兒》，那麼圖書館的管理員會很明確地知道咱們的意圖，而後告訴咱們這本書在哪裏，你就能夠拿到這本書。

拿到這本書以後，你以爲還不錯，想借回家慢慢閱讀，你能夠在發出一個請求：我要借書，我借的這本書是《明朝那些事兒》，我借書卡的卡號是20152135。圖書館管理員又會很明確地知道你的意圖，而後再圖書館地登記薄上記上你借走了這本書，而後這一時刻，圖書館的書籍數量會減小一本。

在上面的例子中，你發出的請求對應的就是Redux中的Action，具體的對應關係以下所示：

// 我要找書，我要找的書是《明朝那些事兒》
const action_1 = {
    type: 'search book',
    title: '《明朝那些事兒》'
};

// 我要借書，我借的這本書是《明朝那些事兒》，我借書卡的卡號是20152135
const action_2 = {
    type: 'borrow book',
    title: '《明朝那些事兒》',
    myId: '20152135'
};
複製代碼

4. Reducer

Store 收到 Action 之後，必須給出一個新的 State，這樣 View 纔會發生變化。這種 State 的計算過程就叫作 Reducer。

Reducer 是一個函數，它接受 Action 和當前 State 做爲參數，返回一個新的 State。

const reducer = function (state, action) {
    // ...
    return new_state;
};
複製代碼

回到圖書館地例子中：前面提到過，當咱們在圖書館發出找書請求以後，是圖書館管理員幫助咱們找到書籍的具體位置；在咱們發出借書請求以後，是圖書館管理員幫助咱們修改借閱記錄。因此在圖書館的例子中，Reducer就是這位辛勞的圖書館管理員，也只有他纔有去那先修改圖書館中的數據。

如今想象一下這個場景：你想借閱《明朝那些事兒》，在此以前你可能已經借了其餘的書籍，因此圖書館管理員在幫你借閱書籍以後，會告訴你：你如今已經借了哪些書籍，也就是說管理員會返回給你，當前圖書館中你的借閱記錄State。

結合這個場景咱們能夠給出Reducer的具體定義實例，如今看不懂不要緊，只要理解Reducer是什麼角色，有什麼做用就好了。後面會對Reducer作詳細的介紹。

// 你發出的action
const action_2 = {
    type: 'borrow book',
    title: '明朝那些事兒',
    myId: '20152135'
};

// 定義你借書以前，圖書館的State
const previousState = {
    allBooks: ["明朝那些事兒", "百年孤獨", "盜墓筆記", "紅樓夢", "西遊記", "三國演義"],	// 在你借書前，圖書館全部藏書
    outBooks: {	// 圖書館的借閱記錄
        "20152008": ["法醫清明"]，// 其餘人的借閱書籍
        "20152135": ["水滸傳", "魯迅文集"]		// 你的借閱書籍
    }
}

// reducer的具體定義
const reducer = (state = previousState, action) => {
    if(action.type === "borrow book") {
        let bookIndex = state.allBooks.indexOf(action.title);
        state.allBooks.splice(bookIndex, 1);	// 刪除你要借閱的書籍
        outBooks[action.myId].puhs(action.title);	// 把你借閱的書籍添加到你的借閱記錄裏面
        
        return state;		// 必定要把處理後的state返回
    }
    return state;
}
複製代碼

寫在最後

這一篇博客中，以圖書館爲例子給你們介紹了Redux中最基本也是最重要的幾個元素，瞭解這幾個元素以後，在下篇博客中，給你們介紹如何在React項目中使用Redux。