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 )