-
-
Notifications
You must be signed in to change notification settings - Fork 189
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 |