GithubHelp home page GithubHelp logo

gaearon / redux-search Goto Github PK

View Code? Open in Web Editor NEW

This project forked from bvaughn/redux-search

8.0 3.0 1.0 3.47 MB

Redux bindings for client-side search

Home Page:

License: MIT License

JavaScript 97.60% CSS 2.12% HTML 0.28%

redux-search's Introduction


Redux Search

NPM version NPM license NPM total downloads NPM monthly downloads Circle CI badge

Higher-order Redux library for searching collections of objects. Search algorithms powered by js-worker-search.

Check out the live demo at

Or install it yourself with NPM:

npm install --save redux-search


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 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.


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
// 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 store = compose(
    // 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)

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 as searchText,
  result as bookIds
} = getSearchSelectors('books')

const selectors = createSelector(
  [bookIds, books, text],
  (bookIds, books, text) => ({

const actions = {
  searchBooks: createSearchAction('books')

export default connect(selectors, actions)(YourConnectedComponent)


Changes are tracked in the changelog.


redux-search is available under the MIT License.

redux-search's People


bvaughn avatar cesarandreu avatar dzannotti avatar


 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar


 avatar  avatar  avatar



Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.