redux search

búsqueda redux

Biblioteca Redux de orden superior para buscar colecciones de objetos. Algoritmos de búsqueda impulsados ​​por js-worker-search.

Vea la demostración en vivo en bvaughn.github.io/redux-search

O instálelo usted mismo con NPM:

 npm install --save redux-search

Descripción general

Este README proporciona una introducción rápida a la búsqueda redux. Para obtener más detalles, consulte la documentación de la API.

redux-search busca colecciones de documentos y devuelve resultados como una Array de identificadores de documentos. Es importante tener en cuenta que los documentos en sí no se devuelven. Esto se debe a que la búsqueda real se realiza en un hilo de trabajo web por motivos de rendimiento. Para evitar serializar los documentos y pasarlos de un lado a otro, redux-search simplemente pasa sus identificadores.

Debido a esto, cada documento debe contener un atributo id .

redux-search proporciona una acción para buscar recursos, así como selectores para obtener resultados de búsqueda y el texto de búsqueda actual. Luego observa la tienda en busca de cambios en los recursos y actualiza automáticamente los resultados de la búsqueda según sea necesario.

Tenga en cuenta que redux-search actualmente depende del tiempo de ejecución del Regenerator. Se recomienda que su proyecto requiera babel-polyfill para proporcionar ese tiempo de ejecución.

Ejemplo

Configurando la tienda

redux-search observa la tienda en busca de cambios en las colecciones que se pueden buscar y crea automáticamente un índice de búsqueda. Para hacer esto, simplemente necesita que le digan qué recursos observar y qué campos indexar.

 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 ) 

Personalización del índice de búsqueda

De forma predeterminada, redux-search crea un índice para que coincida con todas las subcadenas. Puede anular este comportamiento proporcionando su propio parámetro searchApi preconfigurado al middleware de la siguiente manera:

 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 ) 

Límites de palabras personalizados (tokenización), distinción entre mayúsculas y minúsculas y coincidencia parcial de tokens

También puede pasar parámetros al constructor SearchApi que personaliza la forma en que la búsqueda divide el texto en palabras (tokenizes), cambia la búsqueda del valor predeterminado que no distingue entre mayúsculas y minúsculas a mayúsculas y minúsculas y/o habilita la coincidencia en cualquier token de búsqueda (cambiando el filtrado de búsqueda de AND a 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 ) 

Conexión de un componente

redux-search proporciona selectores y creadores de acciones para conectar fácilmente componentes con el estado de búsqueda. Por ejemplo, usando reselect puede conectar su componente de esta manera:

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

Registro de cambios

Los cambios se rastrean en el registro de cambios.

Licencia

redux-search está disponible bajo la licencia MIT.