重新翻譯版本|Redux-Reselect 文件

phpsmarter發表於2019-04-23

“selector”是一個簡單的Redux庫,靈感來源於NuclearJS.

Selector可以計算衍生的資料,可以讓Redux做到儲存儘可能少的state。
Selector比較高效,只有在某個引數發生變化的時候才發生計算過程.
Selector是可以組合的,他們可以作為輸入,傳遞到其他的selector.

//這個例子不必太在意,後面會有詳細的介紹
import { createSelector } from 'reselect'

const shopItemsSelector = state => state.shop.items
const taxPercentSelector = state => state.shop.taxPercent

const subtotalSelector = createSelector(
  shopItemsSelector,
  items => items.reduce((acc, item) => acc + item.value, 0)
)

const taxSelector = createSelector(
  subtotalSelector,
  taxPercentSelector,
  (subtotal, taxPercent) => subtotal * (taxPercent / 100)
)

export const totalSelector = createSelector(
  subtotalSelector,
  taxSelector,
  (subtotal, tax) => ({ total: subtotal + tax })
)

let exampleState = {
  shop: {
    taxPercent: 8,
    items: [
      { name: 'apple', value: 1.20 },
      { name: 'orange', value: 0.95 },
    ]
  }
}

console.log(subtotalSelector(exampleState)) // 2.15
console.log(taxSelector(exampleState))      // 0.172
console.log(totalSelector(exampleState))    // { total: 2.322 }
複製程式碼

安裝

npm install reselect

例項

快取Selcectos的動機

例項是基於 Redux Todos List example.

containers/VisibleTodoList.js

import { connect } from 'react-redux'
import { toggleTodo } from '../actions'
import TodoList from '../components/TodoList'

//下面這段程式碼是根據過濾器的state來改變日程state的函式
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是根據過濾函式返回的state，傳入兩個實參
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}
//mapDispatchToProps來傳遞dispatch的方法
const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id))
    }
  }
}
//使用Redux的connect函式注入state,到TodoList元件
const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

export default VisibleTodoList
複製程式碼

在上面的例子中,mapStateToProps呼叫getVisibleTodos去計算todos.這個函式設計的是相當好的,但是有個缺點：todos在每一次元件更新的時候都會重新計算.如果state樹的結構比較大,或者計算比較昂貴,每一次元件更新的時候都進行計算的話,將會導致效能問題.Reselect能夠幫助redux避免不必要的計算過程.

建立一個快取Selector

我們可以使用記憶快取selector代替getVisibleTodos,如果state.todos和state.visibilityFilter發生變化,他會重新計算state,但是隻發生在其他部分的state變化,就不會重新計算.

Reslect提供一個函式createSelector來建立一個記憶selectors.createSelector接受input-selectors和一個變換函式作為引數.如果Redux的state發生改變造成input-selector的值發生改變,selector會呼叫變換函式,依據input-selector做引數,返回一個結果.如果input-selector返回的結果和前面的一樣,那麼就會直接返回有關state,會省略變換函式的呼叫.

下面我們定義一個記憶selectorgetVisibleTodos替代非記憶的版本

selectors/index.js

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)
    }
  }
)
複製程式碼

上面的的例項中,getVisibilityfilter和getTodos是input-selectors.這兩個函式是普通的非記憶selector函式,因為他們沒有變換他們select的資料.getVisibleTodos另一方面是一個記憶selector.他接收getVisibilityfilter和getTodos作為input-selectors,並且作為一個變換函式計算篩選的todo list.

組合selectors

一個記憶性selector本身也可以作為另一個記憶性selector的input-selector.這裡getVisibleTodos可以作為input-selector作為關鍵字篩選的input-selector:

const getKeyword = (state) => state.keyword

const getVisibleTodosFilteredByKeyword = createSelector(
  [ getVisibleTodos, getKeyword ],
  (visibleTodos, keyword) => visibleTodos.filter(
    todo => todo.text.indexOf(keyword) > -1
  )
)
複製程式碼

把Selector連線到Redux Store

如果你正在使用 React Redux, 你可以直接在mapStateToProps()中呼叫 selector:

containers/VisibleTodoList.js

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
複製程式碼

在Selectors中獲取 React 的 props

這一部分我們假設程式將會有一個擴充套件,我們允許selector支援多重todo List.請注意如果要完全實施這個擴充套件,reducers,components,actions等等都需要作出改變.這些內容和主題不是太相關,所以這裡就省略掉了.

目前為止,我們僅僅看到selectors接收store的state作為一個引數,其實一個selector葉可以接受props.

這裡是一個App元件,渲染出三個VisibleTodoList元件,每一個元件有ListId屬性.

components/App.js

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>
)
複製程式碼

每一個VisibleTodoListcontainer應該根據各自的listId屬性獲取state的不同部分.所以我們修改一下getVisibilityFilter和getTodos,便於接受一個屬性引數

`selectors/todoSelectors.js`

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
複製程式碼

props可以從mapStateToProps傳遞到getVisibleTodos：

const mapStateToProps = (state, props) => {
  return {
    todos: getVisibleTodos(state, props)
  }
}
複製程式碼

現在getVisibleTodos可以獲取props,每一部分似乎都工作的不錯.

**但是還有個問題! 當getVisibleTodosselector和VisibleTodoListcontainer的多個例項一起工作的時候,記憶功能就不能正常執行:

containers/VisibleTodoList.js

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
    //⚠️下面的selector不能正確的記憶
    todos: getVisibleTodos(state, props)
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id))
    }
  }
}

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

export default VisibleTodoList
複製程式碼

使用createSelector建立的selector時候,如果他的引數集合和上一次的引數機會是一樣的,僅僅返回快取的值.如果我們交替渲染<VisibleTodoList listId="1" /> 和<VisibleTodoList listId="2" />時,共享的selector將會交替接受{listId：1}和{listId:2}作為他的props的引數.這將會導致每一次呼叫的時候的引數都不同,因此selector每次都會重新來計算而不是返回快取的值.下一部分我們將會介紹怎麼解決這個問題.

跨越多個元件使用selectors共享props

這一部分的例項需要React Redux v4.3.0或者更高版本的支援.

在多個VisibleTodoList元件中共享selector,同時還要保持記憶性,每一個元件的例項需要他們自己的selector私有拷貝.

現在讓我們建立一個函式makeGetVisibleTodos,這個函式每次呼叫的時候返回一個新的getVisibleTodos的拷貝:

selectors/todoSelectors.js

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
複製程式碼

我們也需要設定給每一個元件的例項他們各自獲取私有的selector方法.mapStateToProps的connect函式可以幫助完成這個功能.

如果mapStateToProps提供給connect的不是一個對形象,而是一個函式,每個container中就會建立獨立的mapStateToProps例項.

在下面的例項中,mapStateProps建立一個新的getVisibleTodosselector,他返回一個mapStateToProps函式,這個函式能夠接入新的selector.

const makeMapStateToProps = () => {
  const getVisibleTodos = makeGetVisibleTodos()
  const mapStateToProps = (state, props) => {
    return {
      todos: getVisibleTodos(state, props)
    }
  }
  return mapStateToProps
}
複製程式碼

如果我們把makeMapStateToprops傳遞到connect,每一個visibleTodoListcontainer將會獲得各自的含有私有getVisibleTodosselector的mapStateToProps函式.這樣一來記憶就正常了,不管VisibleTodoListcontainers的渲染順序怎麼樣.

containers/VisibleTodoList.js

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
複製程式碼

API

createSelector(…inputSelectors|[inputSelectors],resultFunc)

接受一個或者多個selectors,或者一個selectors陣列,計算他們的值並且作為引數傳遞給resultFunc.

createSelector通過判斷input-selector之前呼叫和之後呼叫的返回值的全等於(===,這個地方英文文獻叫reference equality,引用等於,這個單詞是本質,中文沒有翻譯出來).經過createSelector建立的selector應該是immutable(不變的).

經過createSelector建立的Selectors有一個快取,大小是1.這意味著當一個input-selector變化的時候,他們總是會重新計算state,因為Selector僅僅儲存每一個input-selector前一個值.

const mySelector = createSelector(
  state => state.values.value1,
  state => state.values.value2,
  (value1, value2) => value1 + value2
)

// You can also pass an array of selectors
//可以出傳遞一個selector陣列
const totalSelector = createSelector(
  [
    state => state.values.value1,
    state => state.values.value2
  ],
  (value1, value2) => value1 + value2
)
複製程式碼

在selector內部獲取一個元件的props非常有用.當一個selector通過connect函式連線到一個元件上,元件的屬性作為第二個引數傳遞給selector:

const abSelector = (state, props) => state.a * props.b

// props only (ignoring state argument)
const cSelector =  (_, props) => props.c

// state only (props argument omitted as not required)
const dSelector = state => state.d

const totalSelector = createSelector(
  abSelector,
  cSelector,
  dSelector,
  (ab, c, d) => ({
    total: ab + c + d
  })
)

複製程式碼

defaultMemoize(func, equalityCheck = defaultEqualityCheck)

defaultMemoize能記住通過func傳遞的引數.這是createSelector使用的記憶函式.

defaultMemoize 通過呼叫equalityCheck函式來決定一個引數是否已經發生改變.因為defaultMemoize設計出來就是和immutable資料一起使用,預設的equalityCheck使用引用全等於來判斷變化:

function defaultEqualityCheck(currentVal, previousVal) {
  return currentVal === previousVal
}
複製程式碼

defaultMemoize和createSelectorCreator去配置equalityCheck函式.

createSelectorCreator(memoize,…memoizeOptions)

createSelectorCreator用來配置定製版本的createSelector.

memoize引數是一個有記憶功能的函式,來代替defaultMemoize. …memoizeOption展開的引數是0或者更多的配置選項,這些引數傳遞給memoizeFunc.selectorsresultFunc作為第一個引數傳遞給memoize,memoizeOptions作為第二個引數:

const customSelectorCreator = createSelectorCreator(
  customMemoize, // function to be used to memoize resultFunc,記憶resultFunc
  option1, // option1 will be passed as second argument to customMemoize 第二個慘呼
  option2, // option2 will be passed as third argument to customMemoize 第三個引數
  option3 // option3 will be passed as fourth argument to customMemoize   第四個引數
)

const customSelector = customSelectorCreator(
  input1,
  input2,
  resultFunc // resultFunc will be passed as first argument to customMemoize  作為第一個引數傳遞給customMomize
)
複製程式碼

在customSelecotr內部滴啊用memoize的函式的程式碼如下:

customMemoize(resultFunc, option1, option2, option3)
複製程式碼

下面是幾個可能會用到的createSelectorCreator的例項:

為defaultMemoize配置equalityCheck

import { createSelectorCreator, defaultMemoize } from 'reselect'
import isEqual from 'lodash.isEqual'

// create a "selector creator" that uses lodash.isEqual instead of ===
const createDeepEqualSelector = createSelectorCreator(
  defaultMemoize,
  isEqual
)

// use the new "selector creator" to create a selector
const mySelector = createDeepEqualSelector(
  state => state.values.filter(val => val < 5),
  values => values.reduce((acc, val) => acc + val, 0)
)
複製程式碼

使用loadsh的memoize函式來快取未繫結的快取.

import { createSelectorCreator } from 'reselect'
import memoize from 'lodash.memoize'

let called = 0
const hashFn = (...args) => args.reduce(
  (acc, val) => acc + '-' + JSON.stringify(val),
  ''
)
const customSelectorCreator = createSelectorCreator(memoize, hashFn)
const selector = customSelectorCreator(
  state => state.a,
  state => state.b,
  (a, b) => {
    called++
    return a + b
  }
)
複製程式碼

createStructuredSelector({inputSelectors}, selectorCreator = createSelector)

如果在普通的模式下使用createStructuredSelector函式可以提升便利性.傳遞到connect的selector裝飾者(這是js設計模式的概念,可以參考相關的書籍)接受他的input-selectors,並且在一個物件內對映到一個鍵上.

const mySelectorA = state => state.a
const mySelectorB = state => state.b

// The result function in the following selector
// is simply building an object from the input selectors 由selectors構建的一個物件
const structuredSelector = createSelector(
   mySelectorA,
   mySelectorB,
   mySelectorC,
   (a, b, c) => ({
     a,
     b,
     c
   })
)
複製程式碼

createStructuredSelector接受一個物件,這個物件的屬性是input-selectors,函式返回一個結構性的selector.這個結構性的selector返回一個物件,物件的鍵和inputSelectors的引數是相同的,但是使用selectors代替了其中的值.

const mySelectorA = state => state.a
const mySelectorB = state => state.b

const structuredSelector = createStructuredSelector({
  x: mySelectorA,
  y: mySelectorB
})

const result = structuredSelector({ a: 1, b: 2 }) // will produce { x: 1, y: 2 }
複製程式碼

結構性的selectors可以是巢狀式的:

const nestedSelector = createStructuredSelector({
  subA: createStructuredSelector({
    selectorA,
    selectorB
  }),
  subB: createStructuredSelector({
    selectorC,
    selectorD
  })
})

複製程式碼

FAQ

Q:為什麼當輸入的state發生改變的時候,selector不重新計算？

A:檢查一下你的記憶韓式是不是和你的state更新函式相相容(例如:如果你正在使用Redux).例如:使用createSelector建立的selector總是建立一個新的物件,原來期待的是更新一個已經存在的物件.createSelector使用(===)檢測輸入是否改變,因此如果改變一個已經存在的物件沒有觸發selector重新計算的原因是改變一個物件的時候沒有觸發相關的檢測.提示：如果你正在使用Redux,改變一個state物件的錯誤可能有.

下面的例項定義了一個selector可以決定陣列的第一個todo專案是不是已經被完成:

const isFirstTodoCompleteSelector = createSelector(
  state => state.todos[0],
  todo => todo && todo.completed
)
複製程式碼

下面的state更新函式和isFirstTodoCompleteSelector將不會正常工作工作:

export default function todos(state = initialState, action) {
  switch (action.type) {
  case COMPLETE_ALL:
    const areAllMarked = state.every(todo => todo.completed)
    // BAD: mutating an existing object
    return state.map(todo => {
      todo.completed = !areAllMarked
      return todo
    })

  default:
    return state
  }
}
複製程式碼

下面的state更新函式和isFirstTodoComplete一起可以正常工作.

export default function todos(state = initialState, action) {
  switch (action.type) {
  case COMPLETE_ALL:
    const areAllMarked = state.every(todo => todo.completed)
    // GOOD: returning a new object each time with Object.assign
    return state.map(todo => Object.assign({}, todo, {
      completed: !areAllMarked
    }))

  default:
    return state
  }
}
複製程式碼

如果你沒有使用Redux,但是有使用mutable資料的需求,你可以使用createSelectorCreator代替預設的記憶函式,並且使用不同的等值檢測函式.請參看這裡和這裡作為參考.

Q:為什麼input state沒有改變的時候,selector還是會重新計算?

A: 檢查一下你的記憶函式和你你的state更新函式是不是相容(如果是使用Redux的時候,看看reducer).例如:使用每一次更新的時候,不管值是不是發生改變,createSelector建立的selector總是會收到一個新的物件.createSelector函式使用(===)檢測input的變化,由此可知如果每次都返回一個新物件,表示selector總是在每次更新的時候重新計算.

import { REMOVE_OLD } from '../constants/ActionTypes'

const initialState = [
  {
    text: 'Use Redux',
    completed: false,
    id: 0,
    timestamp: Date.now()
  }
]

export default function todos(state = initialState, action) {
  switch (action.type) {
  case REMOVE_OLD:
    return state.filter(todo => {
      return todo.timestamp + 30 * 24 * 60 * 60 * 1000 > Date.now()
    })
  default:
    return state
  }
}
複製程式碼

下面的selector在每一次REMOVE_OLD呼叫的時候,都會重新計算,因為Array.filter總是返回一個新物件.但是在大多數情況下,REMOVE_OLD action都不會改變todo列表,所以重新計算是不必要的.

import { createSelector } from 'reselect'

const todosSelector = state => state.todos

export const visibleTodosSelector = createSelector(
  todosSelector,
  (todos) => {
    ...
  }
)
複製程式碼

你可以通過state更新函式返回一個新物件來減少不必要的重計算操作,這個物件執行深度等值檢測,只有深度不相同的時候才返回新物件.

import { REMOVE_OLD } from '../constants/ActionTypes'
import isEqual from 'lodash.isEqual'

const initialState = [
  {
    text: 'Use Redux',
    completed: false,
    id: 0,
    timestamp: Date.now()
  }
]

export default function todos(state = initialState, action) {
  switch (action.type) {
  case REMOVE_OLD:
    const updatedState =  state.filter(todo => {
      return todo.timestamp + 30 * 24 * 60 * 60 * 1000 > Date.now()
    })
    return isEqual(updatedState, state) ? state : updatedState
  default:
    return state
  }
}
複製程式碼

替代的方法是,在selector中使用深度檢測方法替代預設的equalityCheck函式:

import { createSelectorCreator, defaultMemoize } from 'reselect'
import isEqual from 'lodash.isEqual'

const todosSelector = state => state.todos

// create a "selector creator" that uses lodash.isEqual instead of ===
const createDeepEqualSelector = createSelectorCreator(
  defaultMemoize,
  isEqual
)

// use the new "selector creator" to create a selector
const mySelector = createDeepEqualSelector(
  todosSelector,
  (todos) => {
    ...
  }
)
複製程式碼

檢查equalityCheck函式的更替或者在state更新函式中做深度檢測並不總是比重計算的花銷小.如果每次重計算的花銷總是比較小,可能的原因是Reselect沒有通過connect函式傳遞mapStateProps單純物件的原因.

Q:沒有Redux的情況下可以使用Reselect嗎？

A:可以.Reselect沒有其他任何的依賴包,因此儘管他設計的和Redux比較搭配,但是獨立使用也是可以的.目前的版本在傳統的Flux APP下使用是比較成功的.

如果你使用createSelector建立的selectors,需要確保他的引數是immutable的.

看這裡

Q:怎麼才能建立一個接收引數的selector.

A:Reselect沒有支援建立接收引數的selectors,但是這裡有一些實現類似函式功能的建議.

如果引數不是動態的,你可以使用工廠函式:

const expensiveItemSelectorFactory = minValue => {
  return createSelector(
    shopItemsSelector,
    items => items.filter(item => item.value > minValue)
  )
}

const subtotalSelector = createSelector(
  expensiveItemSelectorFactory(200),
  items => items.reduce((acc, item) => acc + item.value, 0)
)
複製程式碼

總的達成共識看這裡和超越 neclear-js是:如果一個selector需要動態的引數,那麼引數應該是store中的state.如果你決定好了在應用中使用動態引數,像下面這樣返回一個記憶函式是比較合適的:

import { createSelector } from 'reselect'
import memoize from 'lodash.memoize'

const expensiveSelector = createSelector(
  state => state.items,
  items => memoize(
    minValue => items.filter(item => item.value > minValue)
  )
)

const expensiveFilter = expensiveSelector(state)

const slightlyExpensive = expensiveFilter(100)
const veryExpensive = expensiveFilter(1000000)
複製程式碼

Q：預設的記憶函式不太好,我能用個其他的嗎？

A: 我認為這個記憶韓式工作的還可以,但是如果你需要一個其他的韓式也是可以的. 可以看看這個例子

Q:怎麼才能測試一個selector?

A:對於一個給定的input,一個selector總是產出相同的結果.基於這個原因,做單元測試是非常簡單的.

const selector = createSelector(
  state => state.a,
  state => state.b,
  (a, b) => ({
    c: a * 2,
    d: b * 3
  })
)

test("selector unit test", () => {
  assert.deepEqual(selector({ a: 1, b: 2 }), { c: 2, d: 6 })
  assert.deepEqual(selector({ a: 2, b: 3 }), { c: 4, d: 9 })
})
複製程式碼

在state更新函式呼叫的時候同時檢測selector的記憶函式的功能也是非常有用的(例如使用Redux的時候檢查reducer).每一個selector都有一個recomputations方法返回重新計算的次數:

suite('selector', () => {
  let state = { a: 1, b: 2 }

  const reducer = (state, action) => (
    {
      a: action(state.a),
      b: action(state.b)
    }
  )

  const selector = createSelector(
    state => state.a,
    state => state.b,
    (a, b) => ({
      c: a * 2,
      d: b * 3
    })
  )

  const plusOne = x => x + 1
  const id = x => x

  test("selector unit test", () => {
    state = reducer(state, plusOne)
    assert.deepEqual(selector(state), { c: 4, d: 9 })
    state = reducer(state, id)
    assert.deepEqual(selector(state), { c: 4, d: 9 })
    assert.equal(selector.recomputations(), 1)
    state = reducer(state, plusOne)
    assert.deepEqual(selector(state), { c: 6, d: 12 })
    assert.equal(selector.recomputations(), 2)
  })
})
複製程式碼

另外,selectors保留了最後一個函式呼叫結果的引用,這個引用作為.resultFunc.如果你已經聚合了其他的selectors,這個函式引用可以幫助你測試每一個selector,不需要從state中解耦測試.

例如如果你的selectors集合像下面這樣:

selectors.js

export const firstSelector = createSelector( ... )
export const secondSelector = createSelector( ... )
export const thirdSelector = createSelector( ... )

export const myComposedSelector = createSelector(
  firstSelector,
  secondSelector,
  thirdSelector,
  (first, second, third) => first * second < third
)
複製程式碼

單元測試就像下面這樣: test/selectors.js

// tests for the first three selectors...
test("firstSelector unit test", () => { ... })
test("secondSelector unit test", () => { ... })
test("thirdSelector unit test", () => { ... })

// We have already tested the previous
// three selector outputs so we can just call `.resultFunc`
// with the values we want to test directly:
test("myComposedSelector unit test", () => {
  // here instead of calling selector()
  // we just call selector.resultFunc()
  assert(selector.resultFunc(1, 2, 3), true)
  assert(selector.resultFunc(2, 2, 1), false)
})
複製程式碼

最後,每一個selector有一個resetRecomputations方法,重置recomputations方法為0,這個引數的意圖是在面對複雜的selector的時候,需要很多獨立的測試,你不需要管理複雜的手工計算,或者為每一個測試建立”傻瓜”selector.

Q:Reselect怎麼和Immutble.js一起使用?

A:creatSelector建立的Selectors應該可以和Immutable.js資料結構一起完美的工作. 如果你的selector正在重計算,並且你認為state沒有發生變化,一定要確保知道哪一個Immutable.js更新方法,這個方法只要一更新總是返回新物件.哪一個方法只有集合實際發生變化的時候才返回新物件.

import Immutable from 'immutable'

let myMap = Immutable.Map({
  a: 1,
  b: 2,
  c: 3
})

 // set, merge and others only return a new obj when update changes collection
let newMap = myMap.set('a', 1)
assert.equal(myMap, newMap)
newMap = myMap.merge({ 'a', 1 })
assert.equal(myMap, newMap)
// map, reduce, filter and others always return a new obj
newMap = myMap.map(a => a * 1)
assert.notEqual(myMap, newMap)
複製程式碼

如果一個操作導致的selector更新總是返回一個新物件,可能會發生不必要的重計算.看這裡.這是一個關於pros的討論,使用深全等於來檢測例如immutable.js來減少不必要的重計算過程.

Q:可以在多個元件之間共享selector嗎？

A: 使用createSelector建立的Selector的快取的大小隻有1.這個設定使得多個元件的例項之間的引數不同,跨元件共享selector變得不合適.這裡也有幾種辦法來解決這個問題:

使用工程函式方法,為每一個元件例項建立一個新的selector.這裡有一個內建的工廠方法,React Redux v4.3或者更高版本可以使用. 看這裡
建立一個快取尺寸大於1的定製selector.

Q:有TypeScript的型別嗎？

A: 是的！他們包含在package.json裡.可以很好的工作.

Q：怎麼構建一個柯里化selector?

A：嘗試一些這裡助手函式,由MattSPalmer提供

有關的專案

reselect-map

因為Reselect不可能保證快取你所有的需求,在做非常昂貴的計算的時候,這個方法比較有用.檢視一下reselect-maps readme

reselect-map的優化措施僅僅使用在一些小的案例中,如果你不確定是不是需要他,就不要使用它.

License

MIT

jepsen 官方文件的中文翻譯版本
2022-11-24
kotlinx協程官方文件中文翻譯版本
2018-06-04
Kotlin
文件翻譯器怎麼用？如何翻譯Word文件？
2019-08-15
MPAndroidChart文件翻譯
2019-02-19
Android
有ppt文件翻譯軟體嗎？如何翻譯整篇ppt文件
2019-08-16
Moya官方文件翻譯
2018-03-21
實用的Word文件翻譯方法分享，讓Word文件快速翻譯
2019-08-12
怎麼翻譯整篇Excel文件？Excel文件翻譯一招搞定
2019-08-14
Excel
Dapr 官方文件中文翻譯 v1.5 版本正式釋出
2022-03-22
怎麼把Excel文件翻譯成中文？Excel文件翻譯方法介紹
2019-08-21
Excel
docker官方文件翻譯3
2019-02-22
Docker
docker官方文件翻譯5
2018-05-08
Docker
docker官方文件翻譯2
2018-05-01
Docker
docker官方文件翻譯1
2018-05-01
Docker
influxdb官網文件翻譯
2018-07-30
UX
SnapKit 中文文件翻譯
2019-03-04
APK
rabbitmq 官方文件翻譯-2
2019-02-16
MQ
docker官方文件翻譯4
2019-02-17
Docker
Draft 文件翻譯 - API - ContentState
2021-09-09
RaftAPI
TailWind文件翻譯說明以及每日翻譯進度
2021-01-19
AI
HTTPie 官方文件中文翻譯版
2019-02-16
HTTP
SpringAop英文文件部分翻譯
2018-12-15
Spring
Gin 框架中文文件（翻譯）
2018-07-13
框架
BBNorm官方指導文件翻譯
2018-04-01
ORM
文件翻譯軟體怎麼用？怎麼把Excel文件翻譯成中文版
2019-08-27
Excel
oc-plugin-book 文件協作翻譯外掛（類似 LearnKu.com 的文件翻譯）
2019-06-16
Plugin
SQLAlchemy 2.0 中文文件翻譯完成
2024-04-19
SQL
Draft 文件翻譯 - 快速開始 - 概念
2021-09-09
Raft
PendingIntent 是個啥？官方文件描述的很到位。我給翻譯翻譯
2018-11-08
Intent
Spring系列(零) Spring Framework 文件中文翻譯
2019-03-09
SpringFramework
Appium 文件翻譯計劃 2020 啟動
2020-07-06
APP
ExoPlayer的使用與解析（官方文件翻譯）
2019-04-28
WebSocket 協議 RFC 文件（全中文翻譯）
2019-02-19
Web協議
Serilog文件翻譯系列（三） - 基礎配置
2024-09-01
Serilog文件翻譯系列（一） - 入門指南
2024-08-28
tyFlow Script運算子API中文翻譯文件
2024-12-05
API
Draft 文件翻譯 - 高階主題 - Decorators
2021-09-09
Raft
谷歌翻譯使用php curl請求介面文件
2019-02-16
谷歌PHP

重新翻譯版本|Redux-Reselect 文件

Table of Contents

安裝

例項

快取Selcectos的動機

建立一個快取Selector

組合selectors

把Selector連線到Redux Store

在Selectors中獲取 React 的 props

`selectors/todoSelectors.js`

跨越多個元件使用selectors共享props

API

createSelector(…inputSelectors|[inputSelectors],resultFunc)

defaultMemoize(func, equalityCheck = defaultEqualityCheck)

createSelectorCreator(memoize,…memoizeOptions)

createStructuredSelector({inputSelectors}, selectorCreator = createSelector)

FAQ

Q:為什麼當輸入的state發生改變的時候,selector不重新計算？

Q:為什麼input state沒有改變的時候,selector還是會重新計算?

Q:沒有Redux的情況下可以使用Reselect嗎？

Q:怎麼才能建立一個接收引數的selector.

Q：預設的記憶函式不太好,我能用個其他的嗎？

Q:怎麼才能測試一個selector?

Q:Reselect怎麼和Immutble.js一起使用?

Q:可以在多個元件之間共享selector嗎？

Q:有TypeScript的型別嗎？

Q：怎麼構建一個柯里化selector?

有關的專案

reselect-map

License

相關文章