redux search 다운로드 - redux search 소스 코드 다운로드

redux search

기타 소스코드

1.0.0

다운로드

redux 검색

객체 컬렉션을 검색하기 위한 고차 Redux 라이브러리입니다. js-worker-search로 구동되는 검색 알고리즘.

bvaughn.github.io/redux-search에서 라이브 데모를 확인하세요.

또는 NPM을 사용하여 직접 설치하세요.

 npm install --save redux-search

개요

이 README는 redux-search에 대한 빠른 소개를 제공합니다. 자세한 내용은 API 설명서를 참조하세요.

redux-search는 문서 모음을 검색하고 결과를 문서 ID Array 로 반환합니다. 문서 자체는 반환되지 않는다는 점에 유의하는 것이 중요합니다. 이는 성능상의 이유로 실제 검색이 웹 워커 스레드에서 수행되기 때문입니다. 문서를 직렬화하고 앞뒤로 전달하는 것을 피하기 위해 redux-search는 단순히 해당 ID를 전달합니다.

이 때문에 각 문서에는 id 속성이 포함되어야 합니다 .

redux-search는 리소스 검색을 위한 작업과 검색 결과 및 현재 검색 텍스트를 가져오기 위한 선택기를 제공합니다. 그런 다음 저장소에서 리소스 변경 사항을 감시하고 필요에 따라 검색 결과를 자동으로 업데이트합니다.

redux-search는 현재 Regenerator 런타임에 따라 달라집니다. 해당 런타임을 제공하려면 프로젝트에 babel-polyfill 필요한 것이 좋습니다.

예

스토어 구성

redux-search는 저장소에서 검색 가능한 컬렉션의 변경 사항을 감시하고 자동으로 검색 색인을 구축합니다. 이를 위해서는 감시할 리소스와 인덱싱할 필드를 알려주기만 하면 됩니다.

 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 )

검색 색인 사용자 정의

기본적으로 redux-search는 모든 하위 문자열과 일치하는 인덱스를 구축합니다. 다음과 같이 미리 구성된 자체 searchApi 매개변수를 미들웨어에 제공하여 이 동작을 재정의할 수 있습니다.

 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 )

사용자 정의 단어 경계(토큰화), 대소문자 구분 및 부분 토큰 일치

또한 검색이 텍스트를 단어로 분할하는 방식(토큰화)을 사용자 정의하는 SearchApi 생성자에 매개변수를 전달하고, 검색을 기본 대소문자 구분에서 대소문자 구분으로 변경하거나, 검색 토큰에 대한 일치를 활성화할 수도 있습니다( AND에서 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 )

구성 요소 연결

redux-search는 구성 요소를 검색 상태와 쉽게 연결하기 위한 선택기와 작업 생성기를 제공합니다. 예를 들어 reselect 사용하면 다음과 같이 구성 요소를 연결할 수 있습니다.

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