redux search

pencarian redux

Pustaka Redux tingkat tinggi untuk mencari koleksi objek. Algoritme pencarian didukung oleh js-worker-search.

Lihat demo langsungnya di bvaughn.github.io/redux-search

Atau instal sendiri dengan NPM:

 npm install --save redux-search

Ringkasan

README ini memberikan pengenalan singkat tentang pencarian redux. Untuk lebih jelasnya lihat dokumentasi API.

redux-search mencari koleksi dokumen dan mengembalikan hasil sebagai Array id dokumen. Penting untuk dicatat bahwa dokumen itu sendiri tidak dikembalikan. Hal ini karena pencarian sebenarnya dilakukan di thread pekerja web untuk alasan kinerja. Untuk menghindari pembuatan serial dokumen dan meneruskannya bolak-balik, redux-search hanya meneruskan idnya.

Oleh karena itu, setiap dokumen harus berisi atribut id .

redux-search menyediakan tindakan untuk mencari sumber daya serta penyeleksi untuk mendapatkan hasil pencarian dan teks pencarian saat ini. Kemudian mengawasi toko untuk perubahan sumber daya dan secara otomatis memperbarui hasil pencarian sesuai kebutuhan.

Perhatikan bahwa pencarian redux saat ini bergantung pada runtime Regenerator. Disarankan agar proyek Anda memerlukan babel-polyfill untuk menyediakan waktu proses tersebut.

Contoh

Mengonfigurasi Toko

redux-search mengawasi toko untuk melihat perubahan pada koleksi yang dapat dicari dan secara otomatis membuat indeks pencarian. Untuk melakukan hal ini, ia hanya perlu diberi tahu sumber daya mana yang harus diperhatikan dan bidang mana yang harus diindeks.

 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 ) 

Menyesuaikan Indeks Pencarian

Secara default, redux-search membuat indeks untuk mencocokkan semua substring. Anda dapat mengesampingkan perilaku ini dengan menyediakan parameter searchApi Anda sendiri yang telah dikonfigurasi sebelumnya ke middleware seperti:

 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 ) 

Batasan kata khusus (tokenisasi), sensitivitas huruf besar-kecil, dan pencocokan token parsial

Anda juga dapat meneruskan parameter ke konstruktor SearchApi yang menyesuaikan cara pencarian membagi teks menjadi kata-kata (tokenize), mengubah pencarian dari default case-insensitive menjadi case-sensitive dan/atau mengaktifkan pencocokan pada token pencarian apa pun (mengubah pemfilteran pencarian dari AND ke 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 ) 

Menghubungkan Komponen

redux-search menyediakan penyeleksi dan pembuat tindakan untuk menghubungkan komponen dengan status pencarian dengan mudah. Misalnya, dengan menggunakan reselect Anda dapat menghubungkan komponen seperti ini:

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

log perubahan

Perubahan dilacak di changelog.

Lisensi

redux-search tersedia di bawah Lisensi MIT.