Redux 计算衍生数据（缓存）

什么是衍生数据

官方文档翻译的是衍生数据，→→，其实就是缓存

为什么要计算衍生数据

In Redux, whenever an action is called anywhere in the application, all mounted & connected components call their mapStateToProps function. This is why Reselect is awesome. It will just return the memoized result if nothing has changed.

在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.

• Selector可以计算衍生的数据,可以让Redux做到存储尽可能少的state。-
• Selector比较高效,只有在某个参数发生变化的时候才发生计算过程.
• Selector是可以组合的,他们可以作为输入,传递到其他的selector.

创建 Selector

使用createSelector函数

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)
    }
  }
)

组合 Selector

可记忆的 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
  )
)

连接 Selector 和 Redux Store

如果你在使用 React Redux，你可以在 mapStateToProps() 中当正常函数来调用 selectors

import { getVisibleTodos } from '../selectors'

const mapStateToProps = (state) => {
  return {
    todos: getVisibleTodos(state)
  }
}

在 selectors 中访问 React Props

到目前为止，我们只看到 selector 接收 Redux store state 作为参数，然而，selector 也可以接收 props。

这儿有一个 App 的组件，它渲染了三个叫做 VisibleTodoList 的子组件，每个组件都带一个 listId 的 prop;

const App = () => (
  <div>
    <VisibleTodoList listId="1" />
    <VisibleTodoList listId="2" />
    <VisibleTodoList listId="3" />
  </div>
)

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 将始终重新计算而不是返回缓存的值。

跨多组件的共享 Selector

这节中的例子需要 React Redux v4.3.0 或者更高的版本

为了跨越多个 VisibleTodoList 组件共享 selector，于此同时正确记忆。每个组件的实例需要有拷贝 selector 的私有版本。

我们创建一个 makeGetVisibleTodos 的函数，在每个调用的时候返回一个 getVisibleTodos selector 的新拷贝。

实现原理：如果 connect 的 mapStateToProps 返回的不是一个对象而是一个函数，他将被用做为每个容器的实例创建一个单独的 mapStateToProps 函数。

例如：
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
      }
    }
  )
}

container/VisibleTodosList.js

const makeMapStateToProps = () => {
  const getVisibleTodos = makeGetVisibleTodos()
  const mapStateToProps = (state, props) => {
    return {
      todos: getVisibleTodos(state, props)
    }
  }
  return mapStateToProps
}