Redux was [announced back in 2015](https://www.youtube.com/watch?v=xsSnOQynTHs) and immediately took off as the de-facto state management solution for React. As it gained widespread traction, it also became clear that in many cases it was brought into applications prematurely. The community in some ways started to push back on its use and recommended the built-in `setState` method as an alternative. Several other state libraries also started popping up around this time. Finally, as React Hooks were announced with a built-in `useReducer` method it appeared that Redux's time was up. However, these claims have proven to be premature. Redux is not dead and instead remains React's most popular state management library`*`. 

Recent updates to redux exposing a [hooks-based API](https://react-redux.js.org/api/hooks) address some of its most serious drawbacks and make it even more appealing. This course will show you how to apply redux to a modern react hooks application. I hope you leave this course with a continued appreciation for React Hooks and renewed enthusiasm for Redux.

Thanks for watching 📺.

---

**Notes**

- This content has been inspired by the incredible work done by [Mark Erikson](https://twitter.com/acemarke) on modernizing redux and the fantastic [Redux Style Guide](https://redux.js.org/style-guide/style-guide).

- `*` Comparing [redux](https://www.npmjs.com/package/redux) with [mobx](https://www.npmjs.com/package/mobx),  [xstate](https://www.npmjs.com/package/xstate) and [flux](https://www.npmjs.com/package/flux)

When react hooks were released in the beginning of 2019 it looked like it might be the end of the line for the popular state management library Redux. React was getting its own `useReducer` function and had also standardized the context API in a way that seemed to negate the need for an alternative library. As hooks became more widely adopted, redux quickly came on board and released its own set of hooks including [useSelector](https://react-redux.js.org/api/hooks#useselector) and [useDispatch](https://react-redux.js.org/api/hooks#usedispatch) that removed a significant amount of boilerplate required to use the library. Further innovation with the [Redux Toolkit](https://redux-toolkit.js.org/) has spurred continued interest in using redux to solve complex application state problems. 

In this lesson I'll introduce this course and hopefully get you excited to learn more about how to integrate redux into your react hooks application.

Introducing Redux with React Hooks

We’re going to start out with an existing react application built with react hooks and add redux in piece by piece. 

All of the code for this application can be found here:
https://github.com/xjamundx/exchange-rate

To setup your app type:

```
git clone https://github.com/xjamundx/exchange-rate.git;
cd exchange-rate;
yarn;
yarn start;
```

There are primary in this repo you should be looking at:

- The `main` branch features the currency exchange calculator using react hooks. That will be the basis for our course.
-  The `redux` branch is basically the final state of the application after we apply redux.


Exploring our Currency Exchange Application

This lesson shows you how to install `redux` and `react-redux` to create a redux store and then use the [Provider](https://react-redux.js.org/api/provider) component to enable redux throughout your entire application.

First we start by installing `redux` and `react-redux` using:
`yarn add redux react-redux`


Then we use the [createStore](https://redux.js.org/api/createstore) method in redux to keep a place to store our data.

```
import { createStore } from "redux";

export const store = createStore(reducer);
 ```

After that we create a reducer function. Reducer functions are similar to the [Array prototype's reduce method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce).

The first argument could be considered the previous state of the world and the second argument is the current action being applied.

```
function reducer(state, action) {
	return state;
}
```

[Reducers absolutely must not have side effects](https://redux.js.org/style-guide/style-guide#reducers-must-not-have-side-effects) and should never change the previous state. Instead in reducers it's common to see the pattern of using [object spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) to make a copy of the current state into a new object, before modifying any properties:

```
return  { ...state, changedProperty: "value" }
```

Once a redux store is created we use the `<Provider>` component to pass that store down to each component. More info about Provider can be found here: https://react-redux.js.org/api/provider

Add Redux to an Existing React Application

Redux has greatly simplified the pattern used to access state from its store. We now use the [useSelector](https://react-redux.js.org/api/hooks#useselector) hook. 

This hook takes as its main argument a function that receives the entire redux state and returns a single part of that state. It looks like this.

```
const amount = useSelector(state => state.amount);
```

Components using this hook will be re-rendered any time the returned value changes (either the value itself, or its reference in the case of objects and arrays).

Learn more about this hook here:
https://react-redux.js.org/api/hooks

Access State with the Redux useSelector Hook

Our app is currently updating both the amount and currency code values using callback functions created in the ExchangeRate component and passed down to child components through props. With redux we can avoid this indirection.

`useDispatch()` takes no arguments and simply returns a `dispatch` function which can be used to fire actions into your reducers.

Actions dispatched are encouraged to follow the Flux-Standard-Action style:
https://github.com/redux-utilities/flux-standard-action#flux-standard-action

**Note:**

The last 1 minute of this video is just me ranting about two things:

1. How nicely redux hooks work alongside the built-in react hooks
2. How much cleaner our parent ExchangeRate component is after giving each child component the power to dispatch its own actions.

---

You can learn more about all of the redux hooks here:
https://react-redux.js.org/api/hooks

Dispatch Actions with the useDispatch Hook in Redux

As we start to put more data and logic into redux.

One of the first thing that happens is that we break out our root reducer into multiple reducers, sometimes called slices, which are meant to represent “slices” of data in your application.

To achieve this we rely on the [combineReducers](https://redux.js.org/api/combinereducers) method from redux.

Once we split up out reducers, I then show how to access the state using the namespaces we just created and share some best practices for naming actions.

**Note**

The [redux style guide](https://redux.js.org/style-guide/style-guide#model-actions-as-events-not-setters) suggests modeling actions as events and not setters. For example `rates/ratesReceived` instead of `rates/setRates`. This encourages the pattern of listening for actions across multiple reducers.

Split your Redux Store into Multiple Reducers

As our data becomes spread out across multiple reducers, it becomes important standardize how we access  that data. Ultimately each “slice” of your redux store owns how that data is named or stored and it’s convenient to provide selector functions as a public interface to that data.

More about this technique can be found in the redux style guide:
https://redux.js.org/style-guide/style-guide#use-selector-functions-to-read-from-store-state

It's also strongly recommended that you cache/memoize your selectors, especially as they get more complex. A common library to help with that pattern is [reselect](https://github.com/reduxjs/reselect) but we do not cover it in this lesson.


Selector Functions: An API for Accessing Redux State

This lesson covers the use of action type constants and action creators.

Action type constants are common in legacy redux apps, but aren't strictly required. I find it's slightly better to include these constants in the slice files alongside the reducers and action creators that reference them. 

Action creators are much more helpful and serve as a public API for sending actions into your reducer. They can help clean up messy `dispatch` statements and reduce the code needed to dispatch events.

Overall there's nothing very complicated about these two techniques, they're just common patterns in redux that are important to learn.

I strongly suggested studying the [redux style guide](https://redux.js.org/style-guide/style-guide) for more insight into how to use these (and other) patterns effectively.

Refactor to use Action Type Constants and Action Creators when Dispatching Redux Actions


Our app right now only has one async function. It’s `getExchangeRates` and it's found in `api.js`. That’s currently being called in a `useEffect` hooks inside of ExchangeRate.js. The hook is nice because it runs on first load and then any time our base currencyCode gets changed. In general, I think this is the *right* way to model API updates such a this one.

However, there are cases we will want our action creators to support asynchronous calls. This is a very common pattern found in legacy redux application, so I think it's worth exploring in depth.

--- 

#### Using redux thunk:

```
import thunk from "redux-thunk";
// ...
createStore(combineReducers(/* ... */),
  applyMiddleware(thunk)
);
```
---

- [Redux Thunk Documentation](https://github.com/reduxjs/redux-thunk)


Async Actions with redux-thunk

In this lesson we take redux outside of the react lifecycle to improve the performance of our initial AJAX call. We also practice using the `getState` argument passed in to our thunks.

This lesson demonstrates that you can get a small performance gain by removing AJAX calls that feed into redux from the react/hooks lifecycle. In this video we see a 100ms reduction in the time it takes to initiate our AJAX call to load AJAX rates when we move it outside of `useEffect` and into our index.js file.

A thorough look at some of these patterns can be found here:
https://redux.js.org/tutorials/essentials/part-5-async-logic


Documentation for all of the methods available on our redux store including `dispatch` and `getState` can be found here:
https://redux.js.org/api/store/#store-methods-1


**Note:** If you want to keep the logic inside of the `useEffect` and still get the performance benefit you kick off your API calls somewhere and store the generated promise somewhere and pick that up in your `useEffect` hook. 

Directly Dispatch Actions into the Redux Store Before React Renders

So far our reducers have simply been used to update a single value passed in with an action. In this lesson we'll practice adding more logic into a reducer, which is recommended in the [redux style guide](https://redux.js.org/style-guide/style-guide#put-as-much-logic-as-possible-in-reducers). We will do this by removing a hard coded list of supported currencies to update based on the API call that we make. 

One of the techniques we'll cover is using curly braces (`{` and `}`) to create [blocks](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/block) inside of our `switch` statement, so that the variables we make while responding to an action don't leak into the outer scope.

Add Logic to our Redux Reducers

Redux does not work well with non-JSON data formats. So you’ve got strings, booleans, numbers and arrays and basic objects. That’s pretty much what you get to work with in your redux store. No sets. No maps. No classes or functions. Just the most basic JavaScript constructs going back for years. 

However, even with these constraints it’s still pretty easy to reach for the wrong data structure in redux. The main culprit that I’ve run into is when working with lists of objects, let show you to use them correctly.

 I demonstrate 3 concepts:

1. How to update an item stored in an array, without changing the other elements.
2. How to write selectors to access items in an array
3. How to re-write arrays of objects as keyed objects and loop over them with `Object.values`

This is a rather long lesson, but I hope you find it helpful. In my experience using objects for lists in redux is preferred over arrays. This helps avoid the issues of accidentally modifying an objects siblings in a reducer (trigger extra re-renders) AND simplifies grabbing a specific object in a selector.


---

The [immer](https://immerjs.github.io/immer/docs/example-reducer) library is now part of the [redux toolkit](https://redux-toolkit.js.org/) and frequently recommended as a way to simplify updating objects in your reducers. We do not cover its use in this course.



Manage Lists of Objects in Redux Apps

When migrating to redux we need to ensure that each component that relies on redux has access to the redux store. To do that we use the `<Provider>` component. We can use that in each individual unit test or in some kind of wrapper.

This lesson demonstrates both approaches and ends with creating our own version or `@testing-library/react`s `render` method, that will automatically wrap all components in a `<Provider>` with our redux store.

More information about this approach can be found here: https://redux.js.org/recipes/writing-tests#connected-components

If you're using Enzyme you may find the [mountWithStore](https://github.com/knegusen/enzyme-redux#mountwithstore) utility from enzyme-redux serves a similar purpose.

---

**Note:**

The `reduxRender` function shown in this lesson actually includes a typo, based on where the `options` are spread. The correct version should look like:

```
const reduxRender = (ui, options) =>
  render(ui, { wrapper: ReduxProvider, ...options });
```

Apply Redux to a Modern React Hooks Application

Instructor

Course Content