redux search

pesquisa redux

Biblioteca Redux de ordem superior para pesquisar coleções de objetos. Algoritmos de pesquisa desenvolvidos com js-worker-search.

Confira a demonstração ao vivo em bvaughn.github.io/redux-search

Ou instale você mesmo com NPM:

 npm install --save redux-search

Visão geral

Este README fornece uma introdução rápida à pesquisa redux. Para mais detalhes consulte a documentação da API.

redux-search pesquisa coleções de documentos e retorna resultados como uma Array de IDs de documentos. É importante observar que os próprios documentos não são devolvidos. Isso ocorre porque a pesquisa real é executada em um encadeamento de trabalho da Web por motivos de desempenho. Para evitar serializar os documentos e passá-los de um lado para o outro, o redux-search simplesmente passa seus ids.

Por conta disso, cada documento deve conter um atributo id .

redux-search fornece uma ação para pesquisar recursos, bem como seletores para obter resultados de pesquisa e o texto de pesquisa atual. Em seguida, ele observa a loja em busca de alterações nos recursos e atualiza automaticamente os resultados da pesquisa conforme necessário.

Observe que redux-search atualmente depende do tempo de execução do Regenerator. É recomendado que seu projeto exija que o babel-polyfill forneça esse tempo de execução.

Exemplo

Configurando a Loja

redux-search monitora a loja em busca de alterações nas coleções pesquisáveis ​​e cria automaticamente um índice de pesquisa. Para fazer isso, basta informar quais recursos observar e quais 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 ) 

Personalizando o índice de pesquisa

Por padrão, redux-search constrói um índice para corresponder a todas as substrings. Você pode substituir esse comportamento fornecendo seu próprio parâmetro searchApi pré-configurado para o middleware da seguinte forma:

 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 palavras personalizados (tokenização), distinção entre maiúsculas e minúsculas e correspondência parcial de token

Você também pode passar parâmetros para o construtor SearchApi que personalizam a forma como a pesquisa divide o texto em palavras (tokenizes), altera a pesquisa do padrão sem distinção entre maiúsculas e minúsculas para distinção entre maiúsculas e minúsculas e/ou habilita a correspondência em qualquer token de pesquisa (alterando o filtragem de pesquisa de AND para 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 ) 

Conectando um componente

redux-search fornece seletores e criadores de ações para conectar facilmente componentes ao estado de pesquisa. Por exemplo, usando reselect você pode conectar seu componente da seguinte forma:

 // 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 alterações

As alterações são rastreadas no changelog.

Licença

redux-search está disponível sob a licença MIT.