The Redux store is provided to the React components of the application using the <Provider>
component. Now, for each React component, you need to define which data from the store that component needs access to. This can be done by creating selector functions. These are not provided by the react-redux
library but instead are user-defined.
A selector function, or selector, is a pure function that selects data from the Redux store’s state. Each component in an application that needs access to the state will have one or more selectors that extract only the necessary data for that component.
As pure functions, selectors should output the same data given the same input. This means that no randomness or side effects can occur inside the function.
A selector:
- Takes
state
as an argument. - Returns what is needed by the component from
state
.
/* Given a state with an array of objects, labeled 'todos', and a string, labeled 'filter': state = { todos: [ {id: 1, isComplete: true, text: 'Go shopping'} {id: 2, isComplete: false, text: 'Call home'} ], filter: 'SHOW_ALL' } */ // Select the current filter export const selectFilter = state => state.filter; // Select the `text` from each todo in an array. export const selectTodoText = state => state.todos.map( todo => todo.text); // Select the id values of completed todos in an array. export const selectIsCompleteIDs = state => state.todos.filter( todo => todo.isComplete).map(todo => todo.id)
- The first selector
selectFilter
returns the stringstate.filter
. selectTodoText
returns an array of the.text
value for each todo object .selectIsCompleteIDs
returns an array of theid
values from the todo objects whereisCompleted
istrue
.
It is a convention to give selectors a name that starts with select
and that represents the specific piece of data they retrieve.
Now, let’s implement some selectors for the Recipes app!
The AllRecipes
component needs to display the entire set of recipes loaded from the database. If a search term is supplied, however, it needs to display only the recipes that match the search term. To accomplish this task you will need the allRecipes
array and the searchTerm
string from the Redux store.
Take a look at searchTermSlice.js where the selectSearchTerm()
selector function has been implemented and exported for you. In allRecipesSlice.js the selectSearchTerm()
function has been imported and it will be up to you to use it to help implement the selectors for the allRecipes
slice.
Instructions
First, you need to implement the selectAllRecipes
selector.
Towards the bottom of allRecipesSlice.js, implement selectAllRecipes
and test the code:
- Start with an
export
statement - Define
selectAllRecipes
withstate
as the only argument - Return the
allRecipes
piece of thestate
- To test the selector, uncomment the call to
testSelectAllRecipes()
at the bottom of the file
You can now implement a new selector that retrieves the recipes based on the searchTerm
in the state.
Below the selectAllRecipes
selector:
- Start with an
export
statement - Define
selectFilteredAllRecipes
withstate
as the only argument - For now, leave the function body empty (
{}
)
You will use the selectAllRecipes
and selectSearchTerm
to retrieve data for selectFilteredAllRecipes
.
Inside the function body of selectFilteredAllRecipes
, create two variables:
allRecipes
and assign the return value ofselectAllRecipes(state)
searchTerm
and assign the return value ofselectSearchTerm(state)
Now you have an array of the recipes in allrecipes
and the current search term string in searchTerm
. To get a filtered list of recipes based on the search term you will use the JavaScript array filter() method.
Inside selectFilteredAllRecipes
, call allRecipes.filter()
with the following callback function as the argument:
recipe => recipe.name.toLowerCase().includes(searchTerm.toLowerCase())
Then, return the result.
Uncomment the test function testSelectFilteredAllRecipes()
to see the filtered recipe names printed in the output console.
Selectors can be simple or complex. All are an important step to accessing the Redux store data within components.