redux search

recherche redux

Bibliothèque Redux d'ordre supérieur pour rechercher des collections d'objets. Algorithmes de recherche alimentés par js-worker-search.

Découvrez la démo en direct sur bvaughn.github.io/redux-search

Ou installez-le vous-même avec NPM :

 npm install --save redux-search

Aperçu

Ce README fournit une introduction rapide à redux-search. Pour plus de détails, reportez-vous à la documentation de l'API.

redux-search recherche des collections de documents et renvoie les résultats sous forme de Array d'identifiants de documents. Il est important de noter que les documents eux-mêmes ne sont pas restitués. En effet, la recherche réelle est effectuée dans un thread de travail Web pour des raisons de performances. Afin d'éviter de sérialiser les documents et de les transmettre dans les deux sens, redux-search transmet simplement leurs identifiants.

Pour cette raison, chaque document doit contenir un attribut id .

redux-search fournit une action pour rechercher des ressources ainsi que des sélecteurs pour obtenir les résultats de la recherche et le texte de recherche actuel. Il surveille ensuite le magasin pour détecter les modifications des ressources et met automatiquement à jour les résultats de recherche selon les besoins.

Notez que redux-search dépend actuellement du runtime Regenerator. Il est recommandé que votre projet nécessite babel-polyfill pour fournir ce runtime.

Exemple

Configuration du magasin

redux-search surveille le magasin pour détecter les modifications apportées aux collections consultables et crée automatiquement un index de recherche. Pour cela, il suffit de lui indiquer quelles ressources surveiller et quels champs indexer.

 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 ) 

Personnalisation de l'index de recherche

Par défaut, redux-search crée un index pour correspondre à toutes les sous-chaînes. Vous pouvez remplacer ce comportement en fournissant votre propre paramètre searchApi préconfiguré au middleware comme suit :

 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 ) 

Limites de mots personnalisées (tokénisation), sensibilité à la casse et correspondance partielle des jetons

Vous pouvez également transmettre des paramètres au constructeur SearchApi qui personnalisent la façon dont la recherche divise le texte en mots (tokenizes), modifie la recherche par défaut insensible à la casse en sensible à la casse et/ou active la correspondance sur n'importe quel jeton de recherche (en modifiant le filtrage de recherche de 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 ) 

Connexion d'un composant

redux-search fournit des sélecteurs et des créateurs d'actions pour connecter facilement des composants à l'état de recherche. Par exemple, en utilisant reselect vous pouvez connecter votre composant comme ceci :

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

Journal des modifications

Les modifications sont suivies dans le journal des modifications.

Licence

redux-search est disponible sous la licence MIT.