redux search Download - redux search Quellcode herunterladen

redux search

Anderer Quellcode

1.0.0

Herunterladen

Redux-Suche

Redux-Bibliothek höherer Ordnung zum Durchsuchen von Objektsammlungen. Suchalgorithmen basierend auf js-worker-search.

Schauen Sie sich die Live-Demo unter bvaughn.github.io/redux-search an

Oder installieren Sie es selbst mit NPM:

 npm install --save redux-search

Überblick

Diese README-Datei bietet eine kurze Einführung in die Redux-Suche. Weitere Einzelheiten finden Sie in der API-Dokumentation.

redux-search durchsucht Dokumentensammlungen und gibt Ergebnisse als Array von Dokument-IDs zurück. Bitte beachten Sie, dass die Dokumente selbst nicht zurückgegeben werden. Dies liegt daran, dass die eigentliche Suche aus Leistungsgründen in einem Web-Worker-Thread durchgeführt wird. Um zu vermeiden, dass die Dokumente serialisiert und hin- und hergereicht werden, übergibt redux-search einfach ihre IDs.

Aus diesem Grund muss jedes Dokument ein id -Attribut enthalten .

redux-search bietet eine Aktion zum Durchsuchen von Ressourcen sowie Selektoren zum Abrufen von Suchergebnissen und dem aktuellen Suchtext. Anschließend überwacht es den Store auf Ressourcenänderungen und aktualisiert die Suchergebnisse bei Bedarf automatisch.

Beachten Sie, dass die Redux-Suche derzeit von der Regenerator-Laufzeit abhängt. Es wird empfohlen, dass Ihr Projekt babel-polyfill benötigt, um diese Laufzeit bereitzustellen.

Beispiel

Konfigurieren des Stores

redux-search überwacht den Store auf Änderungen an durchsuchbaren Sammlungen und erstellt automatisch einen Suchindex. Dazu muss ihm lediglich mitgeteilt werden, welche Ressourcen überwacht und welche Felder indiziert werden sollen.

 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 )

Anpassen des Suchindex

Standardmäßig erstellt redux-search einen Index, der alle Teilzeichenfolgen abgleicht. Sie können dieses Verhalten außer Kraft setzen, indem Sie der Middleware Ihren eigenen, vorkonfigurierten searchApi Parameter wie folgt bereitstellen:

 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 )

Benutzerdefinierte Wortgrenzen (Tokenisierung), Groß-/Kleinschreibung und teilweiser Token-Abgleich

Sie können auch Parameter an den SearchApi-Konstruktor übergeben, die die Art und Weise anpassen, wie die Suche den Text in Wörter aufteilt (Tokenisierung), die Suche von der Standardeinstellung ohne Berücksichtigung der Groß-/Kleinschreibung in eine Suche mit Berücksichtigung der Groß-/Kleinschreibung ändern und/oder den Abgleich für jedes Suchtoken aktivieren (Ändern des Suchfilterung von UND nach ODER):

 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 )

Anschließen einer Komponente

redux-search bietet Selektoren und Aktionsersteller zum einfachen Verbinden von Komponenten mit dem Suchstatus. Mit reselect können Sie Ihre Komponente beispielsweise folgendermaßen verbinden:

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