Redux 入門 -- 基礎用法

本文目標：但願經過買水果的例子，和你們探討下 redux 的基礎用法，能快速入門 redux。

例子：買水果

一天，程序員阿大（化名）想要去買水果吃，發現小區周圍竟然沒有水果店，因而就打算本身開一個水果店賺點小錢。

阿大分析了一下水果店的營業模式。其實就是處理每一位顧客的需求，而後記帳看看天天的盈虧。那麼抽象成程序就是監聽顧客的行爲，並把每一個行爲的結果都記在帳上，這正好是 redux 所擅長的。阿大成竹在胸，說着就開始寫了起來：

首先模擬顧客的購買行爲：

const action = {
  type: 'BUY_APPLE', // 買蘋果
  payload: {
    count: 2 // 買 2 斤
  }
}
複製代碼

那不一樣的顧客要的斤數可能不一樣，因而他寫了下面這個方法：

/** * 只要知道斤數就能夠快速生成顧客的各類需求 * @param {number} num 顧客要買的斤數 */
function buyApple(num) {
  return {
    type: 'BUY_APPLE',
    payload: {
      count: num
    }
  }
}
複製代碼

而後是帳本的結構，記錄天天賣了多少斤：

// 被託管的數據 state
// 帳本，今天已賣的蘋果：0 斤；爲了簡便，就只舉一個例子，事實上還有不少其餘水果，你們自行腦補
const state = { apple: 0 }; 
複製代碼

好了，如今顧客需求，帳本都有了，那誰來記帳呢？因此阿大請了一個收銀員負責記帳，並告訴他這麼記帳：

/** * 監聽函數 listener * 收銀員只要知道顧客的需求就能正確的操做帳本 * @param {object} state 帳本 * @param {object} action 顧客的需求 */
function reducer(state, action) {

  // 註冊 ‘買蘋果’ 事件
  // 若是有人買了蘋果，加上顧客買的斤數，更新帳本
  if (action.type === 'BUY_APPLE') {
    return Object.assign({}, state, {
      apple: state.apple + action.payload.count
    });
  }

  // 沒註冊的事件不做處理
  // 買我們店裏沒有的東西，不更新帳本，原樣返回
  return state;
}
複製代碼

好，萬事俱備，能夠正式的監聽顧客的購買需求並更新帳本了：

const { createStore } = require('redux');

// 建立水果店須要收銀員（監聽函數 listener）和帳本（被託管的數據）
const store = createStore(reducer, state);
複製代碼

不只如此，redux 還提供了一個功能，每服務一個顧客，均可以額外作一些事情，因而阿大就想看看每筆交易以後的帳本：

// store.getState() 能夠獲取最新的 state
store.subscribe(() => console.log(JSON.stringify(store.getState())));
複製代碼

好了，顧客開始來買水果了：

// 觸發用戶購買水果的事件
// 銷售員開始銷售
store.dispatch(buyApple(3)); // {"apple":3}
store.dispatch(buyApple(4)); // {"apple":7}
複製代碼

店鋪穩定的運營了下去，阿大內心美滋滋~

講解

上面的例子涉及到了 redux 的幾個概念：action，action creator，state，store。

不過在此以前要先說 redux 特別講究也是特別重要的 3 點：

1. 只能有惟一的 store 對象保存整個應用的 state
2. state 是隻讀的，只能經過 dispatch(action) 的方式來改變 state
3. reducer 必須是純函數

action

action 是行爲信息的抽象，對象類型，它描述發生了什麼。這個對象必須有一個 type 屬性，對於對象裏面的其餘內容，redux 不作限制。可是推薦符合 Flux Standard Action 規範：

{
  type: 'ACTION_TYPE',
  payload, // action 攜帶的數據
}
複製代碼

action creator

action creator 顧名思義就是用來建立 action 的，action creator 只簡單的返回 action。

function createAction(num) {
  return {
    type: 'ACTION_TYPE',
    payload,
  }
}
複製代碼

state

state 是被託管的數據，也就是每次觸發監聽事件，咱們要操做的數據。

reducer

reducer 是用來控制 state 改變的函數。action 描述了發生了什麼，可是並不會知道相應的 state 該怎麼改變。對於不一樣的 action，相應的 state 變化是用 reducer 來描述的。

reducer 接受兩個函數，第一個是 state，第二個是 action，並返回計算以後新的 state。reducer 必須是一個純函數，對於相同的輸入 state 和 action，必定會返回相同的新的 state。

nextState = reducer(prevState, action);
複製代碼

由於 reducer 是純函數，因此原來的 prevState 並不會改變，新的 nextState 是一個最新的快照。

store

store 是把上面三個元素合起來的一個大對象:

{
  createStore,
  combineReducers,
  bindActionCreators,
  applyMiddleware,
  compose,
  __DO_NOT_USE__ActionTypes
}
複製代碼

它負責：

• 託管應用的 state
• 容許經過 store.getState() 方法訪問到託管的 state
• 容許經過 store.dispatch() 方法來觸發 action 更新 state
• 容許經過 store.subscribe() 註冊監聽函數監聽每一次的 action 觸發
• 容許註銷經過 store.subscribe() 方法註冊的監聽函數

// 註冊
const unsubscribe = store.subscribe(() => { /** do something */});

// 註銷
unsubscribe();
複製代碼

圖解

代碼地址：Redux 入門 -- 基礎用法，直接控制檯運行 node ./demo1/index.js 查看效果

上一篇：Redux 是什麼

下一篇：Redux 入門 -- 拆分 reducer