一個(gè)簡單的redux的selector庫
- 可以計(jì)算數(shù)據(jù)來源该编，允許redux只保存最小的必須數(shù)據(jù)量
- 快速高效，除非selector的參數(shù)發(fā)生變化公条，不然selector不會(huì)重新計(jì)算
- 可組合，可以作為別的selector的輸入
Example
import { connect } from 'react-redux'
import { toggleTodo } from '../actions'
import TodoList from '../components/TodoList'
const getVisibleTodos = (todos, filter) => {
switch (filter) {
case 'SHOW_ALL':
return todos
case 'SHOW_COMPLETED':
return todos.filter(t => t.completed)
case 'SHOW_ACTIVE':
return todos.filter(t => !t.completed)
}
}
const mapStateToProps = (state) => {
return {
todos: getVisibleTodos(state.todos, state.visibilityFilter)
}
}
const mapDispatchToProps = (dispatch) => {
return {
onTodoClick: (id) => {
dispatch(toggleTodo(id))
}
}
}
const VisibleTodoList = connect(
mapStateToProps,
mapDispatchToProps
)(TodoList)
export default VisibleTodoList
在上面這個(gè)例子中隔披，mapStateToProps調(diào)用了getVisibleTodos來計(jì)算todos赃份。這功能可以正常運(yùn)行，但是有一個(gè)缺點(diǎn)：只要組件更新奢米，todos就會(huì)不斷的被重新計(jì)算抓韩。如果state tree非常大，或者算計(jì)算成本 很高鬓长，這種重復(fù)計(jì)算會(huì)導(dǎo)致一些性能問題谒拴。Reselector能夠幫助避免多余的重復(fù)計(jì)算。
創(chuàng)建一個(gè)可以記憶的Selector
當(dāng)state.todos或者state.visibilityFilter改變時(shí)涉波，我們用一個(gè)帶記憶功能的selector來代替getVisibleTodos來重新計(jì)算todos英上，但是state tree中不相關(guān)部分更新時(shí)，我們不會(huì)重新計(jì)算啤覆。
Reselector提供了createSelector來創(chuàng)建可記憶的selector苍日。createSelector接收一個(gè)數(shù)組的input-selector和一個(gè)transform function作為參數(shù)，如果Redux的state tree發(fā)生改變并導(dǎo)致了input-selector發(fā)生變化窗声，這個(gè)可記憶的selector就會(huì)調(diào)用transform function（以input-selector作為參數(shù)）然后返回結(jié)果相恃。如果input-selector的數(shù)據(jù)沒有變化就會(huì)返回上一次的計(jì)算值，不調(diào)用transform笨觅。
import { createSelector } from 'reselect'
const getVisibilityFilter = (state) => state.visibilityFilter
const getTodos = (state) => state.todos
export const getVisibleTodos = createSelector(
[ getVisibilityFilter, getTodos ],
(visibilityFilter, todos) => {
switch (visibilityFilter) {
case 'SHOW_ALL':
return todos
case 'SHOW_COMPLETED':
return todos.filter(t => t.completed)
case 'SHOW_ACTIVE':
return todos.filter(t => !t.completed)
}
}
)
在上面的例子中 getVisiblityFilter和getTodos是input-selector拦耐。他們創(chuàng)建了普通的不可記憶selector因?yàn)樗麄儧]有改變他們所選的state耕腾。另一方面getvisibleTodos則是一個(gè)可記憶selector。它接收了getVisibilityFilter和getTodos和transform函數(shù)作為參數(shù)杀糯。
組合Selector
可記憶selector本身可以是另一個(gè)可記憶selector的參數(shù)扫俺，下面是getVisibleTodos作為input-selector參數(shù)的例子。
const getKeyword = (state) => state.keyword
const getVisibleTodosFilteredByKeyword = createSelector(
[ getVisibleTodos, getKeyword ],
(visibleTodos, keyword) => visibleTodos.filter(
todo => todo.text.includes(keyword)
)
)
連接selector和redux store
如果你使用React Redux固翰，你可以像平時(shí)一樣在mapStateToProps里調(diào)用selector狼纬。
import { connect } from 'react-redux'
import { toggleTodo } from '../actions'
import TodoList from '../components/TodoList'
import { getVisibleTodos } from '../selectors'
const mapStateToProps = (state) => {
return {
todos: getVisibleTodos(state)
}
}
const mapDispatchToProps = (dispatch) => {
return {
onTodoClick: (id) => {
dispatch(toggleTodo(id))
}
}
}
const VisibleTodoList = connect(
mapStateToProps,
mapDispatchToProps
)(TodoList)
export default VisibleTodoList
在Selector里使用React Props
這一節(jié)在app里引入了一個(gè)假設(shè)的拓展來支持多重Todo List。要注意一個(gè)拓展的完整實(shí)現(xiàn)要求reducer倦挂、components畸颅、actions等的改變，但是這些不是我們要討論的重點(diǎn)方援，為了簡潔我們忽略了這部分。
目前為止我們只看到selector接受Redux store state作為參數(shù)涛癌，但是其實(shí)slector也可以接受props犯戏。
這是一個(gè)叫App的組件，用來渲染三個(gè)VisibleTodoList組件拳话，其中每個(gè)組件都有一個(gè)叫listId的prop：
import React from 'react'
import Footer from './Footer'
import AddTodo from '../containers/AddTodo'
import VisibleTodoList from '../containers/VisibleTodoList'
const App = () => (
<div>
<VisibleTodoList listId="1" />
<VisibleTodoList listId="2" />
<VisibleTodoList listId="3" />
</div>
)
每個(gè)visibleTodoList容器應(yīng)該根據(jù)listId使用state中不同的部分先匪，讓我們來修改getVisibilityFilter和getTodos來接收一個(gè)props作為參數(shù)。
import { createSelector } from 'reselect'
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) => {
switch (visibilityFilter) {
case 'SHOW_COMPLETED':
return todos.filter(todo => todo.completed)
case 'SHOW_ACTIVE':
return todos.filter(todo => !todo.completed)
default:
return todos
}
}
)
export default getVisibleTodos
可以從mapStateToProps的第二個(gè)參數(shù)中獲取props弃衍。
const mapStateToProps = (state, props) => {
return {
todos: getVisibleTodos(state, props)
}
}
現(xiàn)在getVisibleTodos能夠使用props了呀非，并且運(yùn)行得很好。
但是有個(gè)一問題镜盯！
如果使用包含多個(gè)VisibleTodoList容器實(shí)例的getVisibleTodos函數(shù)不能正確的記憶state是否發(fā)生變化岸裙。
import { connect } from 'react-redux'
import { toggleTodo } from '../actions'
import TodoList from '../components/TodoList'
import { getVisibleTodos } from '../selectors'
const mapStateToProps = (state, props) => {
return {
// WARNING: THE FOLLOWING SELECTOR DOES NOT CORRECTLY MEMOIZE
todos: getVisibleTodos(state, props)
}
}
const mapDispatchToProps = (dispatch) => {
return {
onTodoClick: (id) => {
dispatch(toggleTodo(id))
}
}
}
const VisibleTodoList = connect(
mapStateToProps,
mapDispatchToProps
)(TodoList)
export default VisibleTodoList
一個(gè)通過createSelector的生成的selector有size為1的緩存，并且它接收的一系列參數(shù)相同時(shí)速缆，只會(huì)返回被緩存的值降允。如果我們在<VisibleTodoList listId="1" />和<VisibleTodoList listId="2" />之間切換時(shí)，這個(gè)共用的selector會(huì)不斷的接收不同的props參數(shù)（{listId:1}和{listId:2}）艺糜，這會(huì)導(dǎo)致selector每次都重新計(jì)算而不是返回緩存值剧董，因?yàn)榻邮盏膒rops參數(shù)不同。下一節(jié)我們會(huì)解決這個(gè)問題破停。
共用Selector時(shí)翅楼，傳入不同props依舊使用緩存的方法
下面的例子要求React Redux v4.3.0或以上
另外一個(gè)辦法是re-reselect
解決辦法是，每個(gè)VisibleTodoList組件都使用專屬的一個(gè)selector的copy真慢。
我們創(chuàng)建一個(gè)叫makeGetVisibleTodos的函數(shù)毅臊，每次調(diào)用時(shí)返回一個(gè)新的getVisibleTodos的copy。
import { createSelector } from 'reselect'
const getVisibilityFilter = (state, props) =>
state.todoLists[props.listId].visibilityFilter
const getTodos = (state, props) =>
state.todoLists[props.listId].todos
const makeGetVisibleTodos = () => {
return createSelector(
[ getVisibilityFilter, getTodos ],
(visibilityFilter, todos) => {
switch (visibilityFilter) {
case 'SHOW_COMPLETED':
return todos.filter(todo => todo.completed)
case 'SHOW_ACTIVE':
return todos.filter(todo => !todo.completed)
default:
return todos
}
}
)
}
export default makeGetVisibleTodos
同時(shí)晤碘，我們需要讓每個(gè)組件取使用它們專屬的selector褂微。connect中的mapStateToProps參數(shù)可以幫到我們功蜓。
如果connect中的mapStateToProps返回一個(gè)函數(shù)而不是對(duì)象，mapStateToProps會(huì)被用于為每個(gè)組件創(chuàng)建一個(gè)獨(dú)立的mapStateToProps函數(shù)宠蚂。
下面的例子中式撼，makeMapStateToProps創(chuàng)建了getVisibleTodosselector，并返回了擁有獨(dú)立selector的mapStateToProps函數(shù)求厕。
const makeMapStateToProps = () => {
const getVisibleTodos = makeGetVisibleTodos()
const mapStateToProps = (state, props) => {
return {
todos: getVisibleTodos(state, props)
}
}
return mapStateToProps
}
如果我們將這個(gè)makeMapStateToProps傳給connect著隆，每個(gè)VisibleTodosList組件會(huì)或者獨(dú)立的mapStateToProps和獨(dú)立的getVisibleTodosselector。記憶緩存功能現(xiàn)在正確的工作了呀癣。
import { connect } from 'react-redux'
import { toggleTodo } from '../actions'
import TodoList from '../components/TodoList'
import { makeGetVisibleTodos } from '../selectors'
const makeMapStateToProps = () => {
const getVisibleTodos = makeGetVisibleTodos()
const mapStateToProps = (state, props) => {
return {
todos: getVisibleTodos(state, props)
}
}
return mapStateToProps
}
const mapDispatchToProps = (dispatch) => {
return {
onTodoClick: (id) => {
dispatch(toggleTodo(id))
}
}
}
const VisibleTodoList = connect(
makeMapStateToProps,
mapDispatchToProps
)(TodoList)
export default VisibleTodoList
