redux search下载 - redux search源码下载

redux search

其他源码

1.0.0

下载

redux-搜索

用于搜索对象集合的高阶 Redux 库。由 js-worker-search 提供支持的搜索算法。

请访问 bvaughn.github.io/redux-search 查看现场演示

或者使用 NPM 自行安装：

 npm install --save redux-search

概述

本自述文件提供了 redux-search 的快速介绍。有关更多详细信息，请参阅 API 文档。

redux-search 搜索文档集合并以文档 id Array的形式返回结果。值得注意的是，文件本身不会被退回。这是因为出于性能原因，实际搜索是在网络工作线程中执行的。为了避免序列化文档并来回传递它们，redux-search 只传递它们的 id。

因此，每个文档都必须包含一个id属性。

redux-search 提供了用于搜索资源的操作以及用于获取搜索结果和当前搜索文本的选择器。然后，它会监视商店的资源变化，并根据需要自动更新搜索结果。

请注意，redux-search 目前依赖于 Regenerator 运行时。建议您的项目需要babel-polyfill来提供该运行时。

例子

配置商店

redux-search 监视存储中可搜索集合的更改并自动构建搜索索引。为此，只需告诉它要监视哪些资源以及要索引哪些字段。

 import { applyMiddleware , combineReducers , compose , createStore } from 'redux'
import { reducer as searchReducer , reduxSearch } from 'redux-search'

// Configure reducer to store state at state.search
// You can store it elsewhere but you will need to supply your own :searchStateSelector
const rootReducer = combineReducers ( {
  search : searchReducer
  // Your other reducers go here...
} )

// Compose :reduxSearch with other store enhancers
const enhancer = compose (
  applyMiddleware ( ... yourMiddleware ) ,
  reduxSearch ( {
    // Configure redux-search by telling it which resources to index for searching
    resourceIndexes : {
      // In this example Books will be searchable by :title and :author
      books : [ 'author' , 'title' ]
    } ,
    // This selector is responsible for returning each collection of searchable resources
    resourceSelector : ( resourceName , state ) => {
      // In our example, all resources are stored in the state under a :resources Map
      // For example "books" are stored under state.resources.books
      return state . resources . get ( resourceName )
    }
  } )
)

// Note: passing enhancer as the last argument to createStore requires redux@>=3.1.0
const store = createStore ( reducer , initialState , enhancer )

自定义搜索索引

默认情况下，redux-search 构建一个索引来匹配所有子字符串。您可以通过向中间件提供您自己的预配置searchApi参数来覆盖此行为，如下所示：

 import { reduxSearch , SearchApi , INDEX_MODES } from 'redux-search'

// all-substrings match by default; same as current
// eg "c", "ca", "a", "at", "cat" match "cat"
const allSubstringsSearchApi = new SearchApi ( )

// prefix matching (eg "c", "ca", "cat" match "cat")
const prefixSearchApi = new SearchApi ( {
  indexMode : INDEX_MODES . PREFIXES
} )

// exact words matching (eg only "cat" matches "cat")
const exactWordsSearchApi = new SearchApi ( {
  indexMode : INDEX_MODES . EXACT_WORDS
} )

const finalCreateStore = compose (
  // Other middleware ...
  reduxSearch ( {
    resourceIndexes : { ... } ,
    resourceSelector : ( resourceName , state ) => state . resources . get ( resourceName ) ,
    searchApi : allSubstringsSearchApi || prefixSearchApi || exactWordsSearchApi
  } )
) ( createStore )

自定义单词边界（标记化）、区分大小写和部分标记匹配

您还可以将参数传递给 SearchApi 构造函数，以自定义搜索将文本拆分为单词（标记）的方式，将搜索从默认的不区分大小写更改为区分大小写和/或启用任何搜索标记的匹配（更改搜索过滤（从 AND 到 OR）：

 import { reduxSearch , SearchApi } from 'redux-search'

const finalCreateStore = compose (
  // Other middleware ...
  reduxSearch ( {
    resourceIndexes : { ... } ,
    resourceSelector : ( resourceName , state ) => state . resources . get ( resourceName ) ,
    searchApi : new SearchApi ( {
      // split on all non-alphanumeric characters,
      // so this/that gets split to ['this','that'], for example
      tokenizePattern : / [^a-z0-9]+ / ,
      // make the search case-sensitive
      caseSensitive : true
      // return results for documents containing ANY of the search terms.
      // (by default results are only returned for documents containing ALL of the terms.)
      // if true, results are sorted so that documents with more matching tokens come first.
      matchAnyToken : true
    } )
  } )
) ( createStore )

连接组件

redux-search 提供了选择器和操作创建器，可以轻松地将组件与搜索状态连接起来。例如，使用reselect您可以像这样连接您的组件：

 // Elsewhere, in a smart component module...
import { connect } from 'react-redux'
import { createSelector } from 'reselect'
import { createSearchAction , getSearchSelectors } from 'redux-search'

// :books is a map (Object or Immutable.Map) with ids as keys
// These ids correspond to :result returned by getSearchSelectors('books')
const books = state => state . getIn ( [ 'resources' , 'books' ] )

// :text is a selector that returns the text Books are currently filtered by
// :result is an Array of Book ids that match the current seach :text (or all Books if there is no search :text)
const {
  text , // search text
  result // book ids
} = getSearchSelectors ( {
  resourceName : 'books' ,
  resourceSelector : ( resourceName , state ) => state . resources . get ( resourceName )
} )

const selectors = createSelector (
  [ result , books , text ] ,
  ( bookIds , books , searchText ) => ( {
    bookIds ,
    books ,
    searchText
  } )
)

const actions = {
  searchBooks : createSearchAction ( 'books' )
}

export default connect ( selectors , actions ) ( YourConnectedComponent )