redux search

ค้นหา redux

ไลบรารี Redux ที่มีลำดับสูงกว่าสำหรับการค้นหาคอลเลกชันของวัตถุ อัลกอริธึมการค้นหาที่ขับเคลื่อนโดย js-worker-search

ตรวจสอบการสาธิตสดที่ bvaughn.github.io/redux-search

หรือติดตั้งด้วยตัวเองด้วย NPM:

 npm install --save redux-search

ภาพรวม

README นี้จะให้ข้อมูลเบื้องต้นเกี่ยวกับการค้นหาแบบ Redux อย่างรวดเร็ว สำหรับรายละเอียดเพิ่มเติม โปรดดูเอกสารประกอบ API

redux-search ค้นหาคอลเลกชันของเอกสารและส่งกลับผลลัพธ์เป็น Array ของรหัสเอกสาร สิ่งสำคัญคือต้องทราบว่าเอกสารจะไม่ถูกส่งคืน เนื่องจากการค้นหาจริงจะดำเนินการในเธรดของผู้ปฏิบัติงานเว็บด้วยเหตุผลด้านประสิทธิภาพ เพื่อหลีกเลี่ยงการทำให้เอกสารเป็นอนุกรมและส่งต่อกลับไปกลับมา redux-search เพียงแค่ส่งรหัสของพวกเขา

ด้วยเหตุนี้ แต่ละเอกสาร จะต้องมีแอตทริบิวต์ id

redux-search จัดให้มีการดำเนินการสำหรับการค้นหาทรัพยากรตลอดจนตัวเลือกในการรับผลการค้นหาและข้อความค้นหาปัจจุบัน จากนั้นจะเฝ้าดูร้านค้าเพื่อดูการเปลี่ยนแปลงทรัพยากรและอัปเดตผลการค้นหาโดยอัตโนมัติตามความจำเป็น

โปรดทราบว่าขณะนี้การค้นหา redux ขึ้นอยู่กับรันไทม์ของ 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 ) 

บันทึกการเปลี่ยนแปลง

ติดตามการเปลี่ยนแปลงในบันทึกการเปลี่ยนแปลง

ใบอนุญาต

redux-search มีอยู่ภายใต้ใบอนุญาต MIT