redux-search
Higher-order Redux library for searching collections of objects. Search algorithms powered by js-worker-search.
Check out the live demo at bvaughn.github.io/redux-search
Or install it yourself with NPM:
npm install --save redux-search
Overview
This README provides a quick introduction of redux-search. For more details refer to the API documentation.
redux-search searches collections of documents and returns results as an Array of document ids. It is important to note that the documents themselves aren't returned. This is because the actual search is performed in a web-worker thread for performance reasons. In order to avoid serializing the documents and passing them back and forth, redux-search simply passes their ids.
Because of this, each document must contain an id attribute.
redux-search provides an action for searching resources as well as selectors for getting search results and the current search text. It then watches the store for resource changes and automatically updates search results as needed.
Note that redux-search currently depends on the Regenerator runtime. It is recommended that your project require the babel-polyfill to provide that runtime.
Example
Configuring the Store
redux-search watches the store for changes to searchable collections and automatically builds a search index. To do this, it simply needs to be told which resources to watch and which fields to index.
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)
Customizing Search Index
By default, redux-search builds an index to match all substrings. You can override this behavior by providing your own, pre-configured searchApi param to the middleware like so:
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)
Custom word boundaries (tokenization), case-sensitivity and partial token matching
You can also pass parameters to the SearchApi constructor that customize the way the search splits up the text into words (tokenizes), change the search from the default case-insensitive to case-sensitive and/or enable matching on any search token (changing the search filtering from AND to 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)
Connecting a Component
redux-search provides selectors and action-creators for easily connecting components with the search state. For example, using reselect you might connect your component like so:
// 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)
Changelog
Changes are tracked in the changelog.
License
redux-search is available under the MIT License.
7.9k Dec 30, 2022
22.4k Jan 5, 2023
53 Jun 30, 2021
7.8k Jan 6, 2023
36 Dec 29, 2022
5k Dec 22, 2022
11 Jul 10, 2022
12.6k Jan 3, 2023
1.9k Dec 30, 2022
293 Nov 13, 2022
1 May 24, 2022
2 Jul 21, 2022
2 Sep 9, 2022
5.7k Jan 1, 2023
490 Aug 5, 2022