Redux 計算衍生資料（快取）

官方文件翻譯的是衍生資料，→→，其實就是快取

在redux中，只要呼叫了mapstatetoprops就會重新計算state，如果 slector 的計算量比較大，每次更新的重新計算就會造成效能問題。

解決方法：reselect 提供 createselector 函式來建立可記憶的 selector。createselector 接收乙個 input-selectors 陣列和乙個轉換函式作為引數。如果 state tree 的改變會引起 input-selector 值變化，那麼 selector 會呼叫轉換函式，傳入 input-selectors 作為引數，並返回結果。如果 input-selectors 的值和前一次的一樣，它將會直接返回前一次計算的資料，而不會再呼叫一次轉換函式直接利用之前的結果

reselect 庫可以建立可記憶的(memoized)、可組合的selector函式。reselect selectors 可以用來高效地計算 redux store 裡的衍生資料。

「selector」是乙個簡單的redux庫,靈感**於nuclearjs.

使用createselector函式

import  from 'reselect'
const getvisibilityfilter = (state) => state.visibilityfilter
const gettodos = (state) => state.todos
export const getvisibletodos = createselector(
[ getvisibilityfilter, gettodos ],
(visibilityfilter, todos) => 
})

可記憶的 selector 自身可以作為其它可記憶的 selector 的 input-selector。下面的 getvisibletodos 被當作另乙個 selector 的 input-selector，來進一步通過關鍵字（keyword）過濾 todos。

const getkeyword = (state) => state.keyword
const getvisibletodosfilteredbykeyword = createselector(
[ getvisibletodos, getkeyword ],
(visibletodos, keyword) => visibletodos.filter(
todo => todo.text.indexof(keyword) > -1
))

如果你在使用 react redux，你可以在mapstatetoprops()中當正常函式來呼叫 selectors

import  from '../selectors'
const mapstatetoprops = (state) => 
}

到目前為止，我們只看到 selector 接收 redux store state 作為引數，然而，selector 也可以接收props。 )

const getvisibilityfilter = (state, props) =>
state.todolists[props.listid].visibilityfilter
const gettodos = (state, props) =>
state.todolists[props.listid].todos
const getvisibletodos = createselector(
[ getvisibilityfilter, gettodos ],
(visibilityfilter, todos) => 
)

但是這兒有乙個問題！

用 createselector 建立的 selector 只有在引數集與之前的引數集相同時才會返回快取的值。如果我們交替的渲染 visibletodolist listid=「1」 /> 和 visibletodolist listid=「2」 />，共享的 selector 將交替的接收 listid: 1 和 listid: 2。這會導致每次呼叫時傳入的引數不同，因此 selector 將始終重新計算而不是返回快取的值。

這節中的例子需要 react redux v4.3.0 或者更高的版本

為了跨越多個 visibletodolist 元件共享 selector，於此同時正確記憶。每個元件的例項需要有拷貝 selector 的私有版本。

我們建立乙個 makegetvisibletodos 的函式，在每個呼叫的時候返回乙個 getvisibletodos selector 的新拷貝。

實現原理：如果connect的mapstatetoprops返回的不是乙個物件而是乙個函式，他將被用做為每個容器的例項建立乙個單獨的mapstatetoprops函式。

例如：selectors/todoselectors.js

import  from 'reselect'
const getvisibilityfilter = (state, props) =>
state.todolists[props.listid].visibilityfilter
const gettodos = (state, props) =>
state.todolists[props.listid].todos
const makegetvisibletodos = () => 
})}

container/visibletodoslist.js

const makemapstatetoprops = () => 
} return mapstatetoprops
}

Redux 計算衍生資料（快取）

Redux 資料分片

redux資料持久化

redux資料持久化問題

Redux 計算衍生資料（快取）

Redux 資料分片

redux資料持久化

redux資料持久化問題

相關推薦