Redux流程分析與實現

xiangzhihong發表於2019-03-04
Redux

#概述
隨著應用程式單頁面需求的越來越複雜，應用狀態的管理也變得越來越混亂，而Redux的就是為解決這一問題而出現的。在一個大型的應用程式中，應用的狀態不僅包括從伺服器獲取的資料，還包括本地建立的資料，以及反應本地UI狀態的資料，而Redux正是為解決這一複雜問題而存在的。

redux作為一種單向資料流的實現，配合react非常好用，尤其是在專案比較大，邏輯比較複雜的時候，單項資料流的思想能使資料的流向、變化都能得到清晰的控制，並且能很好的劃分業務邏輯和檢視邏輯。下圖是redux的基本運作的流程。

Redux流程分析與實現

如上圖所示，該圖展示了Redux框架資料的基本工作流程。簡單來說，首先由view dispatch攔截action，然後執行對應reducer並更新到store中，最終views會根據store資料的改變執行介面的重新整理渲染操作。

同時，作為一款應用狀態管理框架，為了讓應用的狀態管理不再錯綜複雜，使用Redux時應遵循三大基本原則，否則應用程式很容易出現難以察覺的問題。這三大原則包括：
• 單一資料來源
整個應用的State被儲存在一個狀態樹中，且只存在於唯一的Store中。
• State是隻讀的
對於Redux來說，任何時候都不能直接修改state，唯一改變state的方法就是通過觸發action來間接的修改。而這一看似繁瑣的狀態修改方式實際上反映了Rudux狀態管理流程的核心思想，並因此保證了大型應用中狀態的有效管理。
• 應用狀態的改變通過純函式來完成
Redux使用純函式方式來執行狀態的修改，Action表明了修改狀態值的意圖，而真正執行狀態修改的則是Reducer。且Reducer必須是一個純函式，當Reducer接收到Action時，Action並不能直接修改State的值，而是通過建立一個新的狀態物件來返回修改的狀態。

redux的三大元素

和Flux框架不同，Redux框架主要由Action、Reducer和Store三大元素組成。

Action

Action是一個普通的JavaScript物件，其中的type屬性是必須的，用來表示Action的名稱，type一般被定義為普通的字串常量。為了方便管理，一般通過action creator來建立action，action creator是一個返回action的函式。

在Redux中，State的變化會導致View的變化，而State狀態的改變是通過接觸View來觸發具體的Action動作的，根據View觸發產生的Action動作的不同，就會產生不同的State結果。可以定義一個函式來生成不同的Action，這個函式就被稱為action creator。例如：

const ADD_TODO = `新增事件 TODO`;

function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}

const action = addTodo(`Learn Redux`);

複製程式碼

上面程式碼中，addTodo就是一個action creator。但當應用程式的規模越來越大時，建議使用單獨的模組或檔案來存放action。

Reducer

當Store收到action以後，必須返回一個新的State才能觸發View的變化，State計算的過程即被稱為Reducer。Reducer本質上是一個函式，它接受Action和當前State作為引數，並返回一個新的State。格式如下：

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

複製程式碼

為了保持reducer函式的純淨，請不要在reducer中執行如下的一些操作：
• 修改傳入引數；
• 執行有副作用的操作，如API請求和路由跳轉；
• 呼叫非純函式，如 Date.now() 或 Math.random()

對於Reducer來說，整個應用的初始狀態就可以直接作為State的預設值。例如：

const defaultState = 0;
const reducer = (state = defaultState, action) => {
  switch (action.type) {
    case `ADD`:
      return state + action.payload;
    default: 
      return state;
  }
};
//手動呼叫
const state = reducer(1, {
  type: `ADD`,
  payload: 2
});

複製程式碼

不過，在實際使用過程中，reducer函式並不需要像上面那樣進行手動呼叫，Store的store.dispatch方法會觸發Reducer的自動執行。為此，只需要在生成Store的時候將Reducer傳入createStore方法即可。例如：

import { createStore } from `redux`;
const store = createStore(reducer);

複製程式碼

在上面的程式碼中，createStore函式接受Reducer作為引數，該函式返回一個新的Store，以後每當store.dispatch傳送過來一個新的Action，就會自動呼叫Reducer得到新的State。

##Store
Store就是資料儲存的地方，可以把它看成一個容器，整個應用中只能有一個Store。同時，Store還具有將Action和Reducers聯絡在一起的作用。Store具有以下的一些功能：
• 維持應用的 state；
• 提供getState()方法獲取state；
• 提供dispatch(action)方法更新state；
• 通過subscribe(listener)註冊監聽器;
• 通過subscribe(listener)返回的函式登出監聽器。

根據已有的Reducer來建立Store是一件非常容易的事情，例如Redux提供的createStore函式可以很方便的建立一個新的Store。

import { createStore } from `redux`
import todoApp from `./reducers`
// 使用createStore函式建立Store
let store = createStore(todoApp)

複製程式碼

其中，createStore函式的第二個引數是可選的，該引數用於設定state的初始狀態。而這對於開發同構應用時非常有用的，可以讓伺服器端redux應用的state與客戶端的state保持一致，並用於本地資料初始化。

let store = createStore(todoApp, window.STATE_FROM_SERVER)
複製程式碼

Store物件包含所有資料，如果想得到某個時刻的資料，則需要利用state來獲取。例如：

import { createStore } from `redux`;
const store = createStore(fn);
//利用store.getState()獲取state
const state = store.getState();

複製程式碼

Redux規定，一個state只能對應一個view，只要state相同得到的view就相同，這也是Redux框架的重要特性之一。

到此，關於Redux的運作流程就非常的清晰了，下面總結下Redux的運作流程。

  1. 當使用者觸控介面時，呼叫store.dispatch(action)捕捉具體的action動作。
  2. 然後Redux的store自動呼叫reducer函式，store傳遞兩個引數給reducer函式：當前state和收到的action。其中，reducer函式必須是一個純函式，該函式會返回一個新的state。
  3. 根reducer會把多個子reducer的返回結果合併成最終的應用狀態，在這一過程中，可以使用Redux提供的combineReducers方法。使用combineReducers方法時，action會傳遞給每個子的reducer進行處理，在子reducer處理後會將結果返回給根reducer合併成最終的應用狀態。
  4. store呼叫store.subscribe(listener)監聽state的變化，state一旦發生改變就會觸發store的更新，最終view會根據store資料的更新重新整理介面。

Redux實現

1，建立store

store就是redux的一個資料中心，簡單的理解就是我們所有的資料都會存放在裡面，然後在介面上使用時，從中取出對應的資料。因此首先我們要建立一個這樣的store，可以通過redux提供的createStore方法來建立。

xport default function createStore(reducer, preloadedState, enhancer) {
  ...
  return {
    dispatch,
    subscribe,
    getState,
    replaceReducer,
    [$$observable]: observable
  }
}
複製程式碼

可以看到createStore有三個引數，返回一個物件，裡面有我們常用的方法，下面一一來看一下。

getState

getState用於獲取當前的狀態，格式如下：

function getState() {
    return currentState
  }
複製程式碼

Redux內部通過currentState變數儲存當前store，變數初始值即我們呼叫時傳進來的preloadedState，getState()就是返回這個變數。

subscribe

程式碼本身也不難，就是通過nextListeners陣列儲存所有的回撥函式，外部呼叫subscribe時，會將傳入的listener插入到nextListeners陣列中，並返回unsubscribe函式，通過此函式可以刪除nextListeners中對應的回撥。以下是該函式的具體實現：

var currentListeners = []
var nextListeners = currentListeners

function ensureCanMutateNextListeners() {
    if (nextListeners === currentListeners) {
      nextListeners = currentListeners.slice()        //生成一個新的陣列
    }
 }

function subscribe(listener) {
    if (typeof listener !== `function`) {
      throw new Error(`Expected listener to be a function.`)
    }

    var isSubscribed = true

    ensureCanMutateNextListeners()
    nextListeners.push(listener)

    return function unsubscribe() {
      if (!isSubscribed) {
        return
      }

      isSubscribed = false

      ensureCanMutateNextListeners()
      var index = nextListeners.indexOf(listener)
      nextListeners.splice(index, 1)
    }
 }

複製程式碼

可以發現，上面的原始碼使用currentListeners和nextListeners兩個陣列來儲存，主要原因是在dispatch函式中會遍歷nextListeners，這時候可能會客戶可能會繼續呼叫subscribe插入listener，為了保證遍歷時nextListeners不變化，需要一個臨時的陣列儲存。

dispatch

當view dispatch一個action後，就會呼叫此action對應的reducer，下面是它的原始碼：

function dispatch(action) {  
  ...
  try {
      isDispatching = true
      currentState = currentReducer(currentState, action)  //呼叫reducer處理
    } finally {
      isDispatching = false
    }

    var listeners = currentListeners = nextListeners
    for (var i = 0; i < listeners.length; i++) {                   
      var listener = listeners[i]
      listener()
    }
  ...
}
複製程式碼

從上面的原始碼可以發現，dispatch函式在呼叫了currentReducer以後，遍歷nextListeners陣列，回撥所有通過subscribe註冊的函式，這樣在每次store資料更新，元件就能立即獲取到最新的資料。

replaceReducer

replaceReducer是切換當前的reducer，雖然程式碼只有幾行，但是在用到時功能非常強大，它能夠實現程式碼熱更新的功能，即在程式碼中根據不同的情況，對同一action呼叫不同的reducer，從而得到不同的資料。

function replaceReducer(nextReducer) {
 if (typeof nextReducer !== `function`) {
    throw new Error(`Expected the nextReducer to be a function.`)
  }

  currentReducer = nextReducer
  dispatch({ type: ActionTypes.REPLACE })
  }
複製程式碼

bindActionCreators

bindActionCreators方法的目的就是簡化action的分發，我們在觸發一個action時，最基本的呼叫是dispatch(action(param))。這樣需要在每個呼叫的地方都寫dispatch，非常麻煩。bindActionCreators就是將action封裝了一層，返回一個封裝過的物件，此後我們要出發action時直接呼叫action(param)就可以了。

react-redux

redux作為一個通用的狀態管理庫，它不只針對react，還可以作用於其它的像vue等。因此react要想完美的應用redux，還需要封裝一層，react-redux就是此作用。react-redux庫相對簡單些，它提供了一個react元件Provider和一個方法connect。下面是react-redux最簡單的寫法：

import { Provider } from `react-redux`;     // 引入 react-redux

……
render(
    <Provider store={store}>
        <Sample />
    </Provider>,
    document.getElementById(`app`),
);

複製程式碼

connect方法複雜點，它返回一個函式，此函式的功能是建立一個connect元件包在WrappedComponent元件外面，connect元件複製了WrappedComponent元件的所有屬性，並通過redux的subscribe方法註冊監聽，當store資料變化後，connect就會更新state，然後通過mapStateToProps方法選取需要的state，如果此部分state更新了，connect的render方法就會返回新的元件。

export default function connect(mapStateToProps, mapDispatchToProps, mergeProps, options = {}) {
  ...
  return function wrapWithConnect(WrappedComponent) {
    ...
  }
}
複製程式碼

本文不詳細介紹React-Redux，可以訪問下面的連結React-Redux簡介及應用。

相關文章