Skip to content
This repository has been archived by the owner on Jul 17, 2020. It is now read-only.

Selectors

kenjiO edited this page Aug 29, 2017 · 6 revisions

Selectors

The client application uses selectors whenever any data in the redux store is needed in a React component.

If you are not familiar with redux and specifically how to use its mapStateToProps function it would be helpful to understand that before attempting to use selectors.

Selectors are basically just a wrapper used when querying data in the redux store. Internally they make use of the recompose library. If you want to look into how they are created, look at the createSelectors methods of the reducer definition files.



To use selectors first import it from the client/store/selectors.js file.

import selectors from '../store/selectors'

Note: you may need to include more ../ if the file is located deeper in the file tree


Then add the redux mapStateToProps function to the file where you define your React component. Have that function return an object where the keys are descriptors of your choice and the values are the selectors you want to use.

const mapStateToProps = state => {
  return {
    customers: selectors.customer.getAll
    foodItems: selectors.food.item.getAll
    currentUser: selectors.user.getUser
  }
}

In your React component you can access the data through the props object using the keys you defined in the mapStateToProps return object.

const MyComponent = props =>
   <div>
      <div>{props.customers[0]}</div>
      <div>{props.foodItems[0]}</div>
      <div>{props.currentUser}</div>
    </div>

In the export statement for your React component don't forget to wrap the component with the redux connect method with mapStateToProps as a parameter.

export default connect(mapStateToProps)(MyComponent)


Following is a list of selectors that are defined as of 8/24/2017
selectors.app.dialog.getDialog
selectors.app.dialog.isVisible
selectors.customer.getAll
selectors.customer.getOne
selectors.customer.getScheduled
selectors.customer.loading
selectors.customer.loadError
selectors.customer.saving
selectors.customer.saveError
selectors.delivery.location.getAddressCoordinates
selectors.delivery.location.getUserCoordinates
selectors.delivery.location.loadingAddressLocation
selectors.delivery.location.loadingAddressLocationError
selectors.delivery.location.loadingUserLocation
selectors.delivery.location.loadingUserLocationError
selectors.delivery.assignment.getFilter
selectors.delivery.assignment.getDriverId
selectors.delivery.assignment.getSelectedCustomerIds
selectors.delivery.assignment.getFilteredCustomers
selectors.delivery.assignment.isCustomerSelected
selectors.delivery.assignment.isFetching
selectors.delivery.assignment.hasError
selectors.delivery.route.isFetching
selectors.delivery.route.hasError
selectors.delivery.route.getRoute
selectors.delivery.route.getWaypoints
selectors.delivery.route.getOrigin
selectors.delivery.route.getDestination
selectors.delivery.route.getAllWaypoints
selectors.donation.getAll
selectors.donation.getOne(id)
selectors.donation.saving
selectors.donation.saveError
selectors.donor.getAll
selectors.donor.getOne(id)
selectors.donor.loading
selectors.donor.loadError
selectors.donor.saving
selectors.donor.saveError
selectors.food.item.getAll
selectors.food.item.getOne(id)
selectors.food.item.getScheduled
selectors.food.item.saving
selectors.food.item.saveError
selectors.food.category.getAll
selectors.food.category.getOne(id)
selectors.food.category.loading
selectors.food.category.loadError
selectors.food.category.saving
selectors.food.category.saveError
selectors.food.packages.packages
selectors.food.packages.loading
selectors.food.packages.loadError
selectors.food.packages.saving
selectors.food.packages.saveError
selectors.media.getMedia
selectors.media.loading
selectors.media.loadError
selectors.media.saving
selectors.media.saveError
selectors.page.getAll(type)
selectors.page.getOne(identifier)
selectors.page.loading
selectors.page.loadError
selectors.page.saving
selectors.page.saveError
selectors.questionnaire.getAll
selectors.questionnaire.getOne(identifier)
selectors.questionnaire.getLinkableFields(identifier)
selectors.questionnaire.loading
selectors.questionnaire.loadError
selectors.questionnaire.saving
selectors.questionnaire.saveError
selectors.qEditor.getSectionIds
selectors.qEditor.getSectionById(id)
selectors.qEditor.getFieldIds(sectionId)
selectors.qEditor.getFieldById(id)
selectors.qEditor.getEditingQuestionnaire
selectors.qEditor.getEditingSection
selectors.qEditor.getEditingField
selectors.qEditor.getSelectedSection
selectors.qEditor.getCompleteQuestionnaire
selectors.qEditor.isDirty
selectors.settings.getSettings
selectors.settings.fetching
selectors.settings.error
selectors.settings.success
selectors.user.getUser
selectors.user.fetching
selectors.user.error
selectors.user.success
selectors.volunteer.getAll
selectors.volunteer.getAllDrivers
selectors.volunteer.getOne(id)
selectors.volunteer.loading
selectors.volunteer.loadError
selectors.volunteer.saving
selectors.volunteer.saveError
Clone this wiki locally