Learn

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)
  1. The first selector selectFilter returns the string state.filter.
  2. selectTodoText returns an array of the .text value for each todo object .
  3. selectIsCompleteIDs returns an array of the id values from the todo objects where isCompleted is true.

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

1.

First, you need to implement the selectAllRecipes selector.

Towards the bottom of allRecipesSlice.js, implement selectAllRecipes and test the code:

  1. Start with an export statement
  2. Define selectAllRecipes with state as the only argument
  3. Return the allRecipes piece of the state
  4. To test the selector, uncomment the call to testSelectAllRecipes() at the bottom of the file
2.

You can now implement a new selector that retrieves the recipes based on the searchTerm in the state.

Below the selectAllRecipes selector:

  1. Start with an export statement
  2. Define selectFilteredAllRecipes with state as the only argument
  3. For now, leave the function body empty ({})
3.

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 of selectAllRecipes(state)
  • searchTerm and assign the return value of selectSearchTerm(state)
4.

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.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?