React中间件——Reselect简介

为什么使用reselect

在使用redux时，我们通常会创建很多selector来从store中读取数据。下面的代码取自于redux的todomvc示例。

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

这个代码有一个潜在的问题。每当state tree改变时，selector都要重新运行。当state tree特别大，或者selector计算特别耗时，那么这将带来严重的运行效率问题。

为了解决这个问题，reselect为selector设置了缓存，只有当selector的输入改变时，程序才重新调用selector函数。

使用方法:

使用reselect重写getVisibleTodos

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

更多详细资料请参考：
https://github.com/reactjs/reselect
https://www.jianshu.com/p/8d89c67dfefd