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.