Redux性能優化

Redux is a predictable state container for JavaScript apps.

簡單的說就是Redux可以管理js app的狀態，狀態是由數據維護的，也就是說Redux是管理數據的。那麼Redux是怎麼管理數據的呢？

store

一個Redux app中只有一個store，全部的數據都在這個store中，而經過createStore(reducer, [initState])，initState是可選參數，也就是說決定store的是reducer，reducer決定store中存放什麼樣的數據、處理什麼樣的數據、處理數據的方式。

store在建立的時候內部會執行dispatch({ type: ActionTypes.INIT })，用來初始化整個store的數據結構，同時獲取reducer中的默認數據。之因此能拿到所有的數據結構，是由於在dispatch({ type: ActionTypes.INIT })的時候，全部的reducer都會執行，並根據reducer的combine結構生成數據。在Redux內，每執行一次dispatch，全部的reducer都會執行。

reducer

因此這裏就有個問題，若是reducer比較多的時候，性能是否是就會出問題。你們可能會想到減小reducer，這也是一個辦法，可是若是刻意減小reducer的話，可能會致使某個reducer內過於複雜，後期難以維護。

const dispatcher = (state={}, action) {
  switch (action.type) {
    case "TYPE1": 
    case "TYPE2":
      return reducerFirst(state, action)
    case "TYPE3":
      return reducerSecond(state, action)
    default:
      return state
  }
}

經過這樣簡單的過濾就能夠實現只讓對action感興趣的reducer執行，簡單，方便，快捷。

action

action是個object，它必須有個type屬性，通常是個常量，來標示action類型，方便reducer處理。除去type剩下的通常就是要處理的數據，若是數據比較簡單能夠直接使用Object.assign({}, state, action.data)來處理，這種方法僅適合簡單數據。

若是是複雜數據，有較深的層級，就要使用深度拷貝，這時候你可使用lodash的cloneDeep進行深度拷貝。

var objects = [{ 'a': 1 }, { 'b': 2 }];
var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// ➜ false

immutable

可是複雜數據的深度拷貝是很花性能的，這個時候就可使用immutable.js來解決這個問題。immutable不可改變的意思，在Object-C中是原生提供這種數據類型的。對immutable.js生成的數據進行操做以後老是返回一個新的數據，原有的數據不會改變。

var Immutable = require('immutable');
var map1 = Immutable.Map({a:1, b:2, c:3});
var map2 = map1.set('b', 50);
map1.get('b'); // 2
map2.get('b'); // 50

immutable.js經過結構共享來解決的數據拷貝時的性能問題，數據被set的時候，immutable.js會只clone它的父級別以上的部分，其餘保持不變，這樣你們能夠共享一樣的部分，能夠大大提升性能。如圖

subscribe

每次執行dispatch，經過subscribe註冊的listener都會被執行，若是listener較多，或者listener內部處理比較複雜也會對性能產生影響， 並且在listener內部很難區分哪一個數據被改變了，若是在listener內部繼續dispatch，而沒有處理好執行dispatch條件的話，很容易形成dispatch->listener->dispatch死循環。因此建議經過middleware的方式來處理，並且在middleware內部能夠知道action是什麼，就能夠只處理關心的action。

總結

預分配reducer、精簡reducer

精簡action數據或使用immutable.js

使用middleware處理特殊需求(reducer中不方便處理的需求)

參考

Redux

immutable.js

cloneDeep