Summer’s over — what’s your move? Join Pro for 50% off using code [MAKEITHAPPEN](https://www.codecademy.com/checkout?periods=year&plan_id=proGoldAnnualV2&discountCode=MAKEITHAPPEN)


Learn to access the Redux store to retrieve data and dispatch actions throughout your applications using the `react-redux` package.

The React Redux Library

With selectors, you have given your application the instructions to access data from the Redux store. To use these instructions the `useSelector()` hook is provided by `react-redux`. `useSelector()` accomplishes two things: 
- It returns data from the Redux store using selectors
- It subscribes a child component of `<Provider />` to changes in the store. React, not Redux, will re-render the component if the data from the selector changes.
  
These tasks are both accomplished by calling `useSelector()` inside a component definition and assigning its returned value to a variable.
```js
// Todos.js
import { useSelector } from 'react-redux';
import { selectTodos } from 'todosSlice.js';
 
export const Todos = () => {
  const todos = useSelector(selectTodos);
 
  return (
    <p>{todos}</p>
  )
};
```
In the above example, `useSelector()` takes the imported selector function `selectTodos` as an argument. The returned value is the selected data from the Redux store and is assigned to `todos`. 

Calling `useSelector()`inside the component definition also subscribes the `Todos` component to re-render if any changes occur in the `todos` portion of the Redux store. This optimizes the performance of the application by only re-rendering components that have had their data change and not the entire application. 

`useSelector()` can also use an inline selector as an argument: 
```js
const todos = useSelector(state => state.todos);
```
Inline selectors can be useful if you need to use props for data retrieval.
```js
export const Todo = (props) => {
  const todo = useSelector(state => state.todos[props.id]);

```
This final example uses `props.id` to extract a single element from an array or object in the Redux store.

`useSelector()` completes the 3 step process for accessing data from the Redux store using `react-redux`.
1. The `<Provider>` component is used to provide the Redux store to the nested application.
2. Selectors are created to give instructions on retrieving data from the store.
3. `useSelector()` is called within a child component of `<Provider>` for executing selector instructions to retrieve data and subscribe to re-rendering.

The useSelector() Hook

With the `<Provider>` component, selectors, and `useSelector()` implemented, you are now able to access the application state and subscribe component rendering to data changes. In this exercise, you are going to look at the final step: dispatching actions.
 
Without the `react-redux` library, you needed to create a reference to `store.dispatch` and pass it through the application’s props. With `react-redux` you can now access this reference from each component with `useDispatch()`.
```js
import { useDispatch } from 'react-redux';
 
// within component definition
const dispatch = useDispatch() 
dispatch({type: 'addTodo'});
```
The above example:
- Imports `useDispatch` from `react-redux`.
- Calls `useDispatch()` to obtain a reference to the Redux store `dispatch()` function and assigns it to `dispatch`.
- Dispatches an action using  `dispatch()` with an action object as the argument.
 
Here is a complete example with action creators and a Component definition:
```js
import { useSelector, useDispatch } from 'react-redux';
import { selectTodo } from './todoSlice.js';
import { removeTodo } from './todoSlice.js';

const Todo = () => {
  const todo = useSelector(selectTodo);
  const dispatch = useDispatch();
 
  return (
    <button onClick={() => dispatch(removeTodo(todo))}>
      {todo}
    </button>
  )
}
```
This example demonstrates:
- Importing `useDispatch` (alongside `useSelector`).
- Importing the `removeTodo` action creator from `./todoSlice.js`
- Creating the `dispatch` variable that holds the reference to the Redux store dispatch function.
- Dispatching an action using `dispatch()` with `removeTodo`.

The `useDispatch` hook allows you to dispatch actions from any component that is a descendent of the `<Provider>` component, therefore avoiding passing a reference to `store.dispatch` through props. Both approaches accomplish the same thing but `useDispatch()` avoids props drilling.

In **AllRecipes.js**, take a look at the functions `onFirstRender()` and `onAddRecipeHandler()`. These handlers are still implemented from the earlier version of the app when `dispatch` was made available through props. You will now provide a new reference to the Redux store's `dispatch` function.


The useDispatch() Hook

To take advantage of React Redux within your application, you must install the `react-redux` package using `npm`, the Node Package Manager. If you're not familiar with `npm`, you can [learn more in the documentation](https://docs.npmjs.com/about-npm). This includes understanding the directory structure, confirming installation and versions of your packages.

To install React Redux using `npm`, type the following command into your terminal and hit the "enter" key:
```
npm install react-redux
```
After installation, your application will have access to the tools provided by the React Redux package.

Installing react-redux

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`.

```js
/* 
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.



Selectors

Congratulations on finishing this lesson on the [`react-redux`](https://react-redux.js.org/) library! Let’s review what you’ve learned:
- React and Redux work well together but need more to support React’s UI optimization and Redux’s one-way data flow.
- The `react-redux` library provides React application components access to the Redux store
- The `<Provider>` component wraps around the root component to give its descendants  access to the - Redux `store` without props drilling
- Selectors are pure functions used to access all or part of the `state` in the Redux `store` 
- `useSelector()` retrieves the application `state` through selectors. It must be called from within a component
- `useSelector()` subscribes components to data retrieved from the selectors. React, not Redux, re-renders those components when the selected data changes
- `useDispatch()` returns a reference to Redux store `dispatch()` function


Review

Now that the `react-redux` library is installed, it is time to start the one-way data flow by giving the top-level `<App>` component access to the Redux store. 

The `<Provider>` component from the `react-redux` library gives the components of an application access to the Redux store without the need to pass the store directly to the React components through props. To implement this, wrap the `<Provider>` component around the top-level component and pass `store` through the `store` prop of the `<Provider>`: 
```js
import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './app/App.js';
import { store } from './app/store.js';

import { Provider } from 'react-redux'

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);
```
This example demonstrates:
- Importing `Provider` from `react-redux`.
- Wrapping the `<Provider>` component around the root `<App />` component.
- Passing the `store` through the `<Provider>` component's `store` prop.

Before moving on to the instructions, it is important to note that `ReactDOM.render()` is no longer inside a `render()` function and therefore nothing is subscribed to changes in the Redux store. This is something you will address in the next few exercises. Like many improvements in the world, you sometimes have to break the process to make it better.

The <Provider> Component

The recipe application in the code editor works. Run it right now and give it a try. React is handling the UI rendering through `ReactDOM.render()` which is inside the `render()` function. Redux is managing the state with the `store` and passing the `state` and `dispatch` references through props. Redux also triggers the UI to re-render with `store.subscribe(render)`. So why do you need to use React Redux?

Even though the application works, this is not the best implementation, especially if the application were to grow.

The first issue with this implementation is passing the `state` and `dispatch` reference through props. Using props to access the `state` or to dispatch actions adds unneeded complexity. Keeping track of errors in this situation is unmanageable as the number of components increases. 

Also, the `<App>` component uses *props drilling*, which means it is passing props to child components without using them. This is something React developers like to avoid in order to make components more reusable.

The last issue is subscribing `render()` to changes in the state. This creates more overhead by repeatedly calling `ReactDOM.render()`, which is not the intended implementation for rendering React components.

With React Redux you will learn how to solve these issues by:
- Giving the entire application access to the Redux store without using props and props drilling.
- Subscribing individual components to specific pieces of the application state for optimized rendering.
- Easily dispatching actions within components.



Why React Redux

[React Redux](https://react-redux.js.org/) is the official Redux-UI binding package for React. This means React Redux handles the interactions between React’s optimized UI rendering and Redux’s state management. In this lesson, you will explore the benefits of using the React Redux library and then incorporate the tools provided by the library into a Redux application.

Throughout this lesson, you will be working with a recipe application that uses React for the UI and Redux for state management. You should be comfortable with React and how to create functional components, pass data through props, and nest components to create a complete application. 

The recipe application also has a Redux implementation so you should be familiar with creating and combining reducers, creating the store, and dispatching actions. 

Most importantly you should be familiar with Redux’s one-way data flow:
- Starting with the application state
- Rendering components based on that state
- Dispatching an action to trigger state changes
- Re-rendering any component affected by the new state

React Redux provides tools that will help you implement each stage of the data flow with a React UI.
