In this course we take a basic shopping cart application built with React and fully power it with Redux and RTK using TypeScript. For those of you familiar with Redux Hooks, we use those here, but the emphasis is more on how the Redux Toolkit simplifies the process of setting up your redux application including building slices, reducers, selectors and thunks. Everything we do in the course is typed with TypeScript to make your application development process as smooth and powerful as possible. 

I have a few courses out now about using Redux Hooks, including [Redux with React Hooks](https://egghead.io/courses/redux-with-react-hooks-8a37) and [Modernizing a Legacy Redux Application with Redux Hooks](https://egghead.io/courses/modernizing-a-legacy-redux-application-with-react-hooks-c528), but redux hooks are only part of the story. They make it easy to connect your components with your redux store, but setting up and maintaining that store is still left up to you. [Redux Toolkit](https://redux-toolkit.js.org/) on the other hand provides some really nice guardrails and simplifies that process. It also includes utilities that improve TypeScript's ability to understand redux.

This course follows the process of bringing redux in to manage the data in a shopping cart application. It focuses on splitting your store into slices, creating reducers and selectors and managing async actions with thunks. Our shopping cart app will allow you to see a dynamic list of products, add items to a cart, and eventually checkout. 

Follow along by creating this redux shopping cart application with me and then apply what you've learned to your own applications.

Thank you so much for watching!

Intro to Modern Redux with RTK and TypeScript

This course builds off a react-based shopping cart application containing a list of products (loaded dynamically from a JSON file). It is fully self-sustaining and does not rely on any third party APIs. It uses [vite](https://vitejs.dev/) as the underlying bundler and development tool with [react-ts](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) preset.

To get started simply follow the these instructions:

```
git clone git@github.com:xjamundx/redux-shopping-cart.git
cd redux-shopping-cart
git checkout egghead
npm install
npm run dev
open http://localhost:3000
```

**Note** This course uses a shopping cart application to demonstrate redux principles. It is not meant to demonstrate anything about making actual financial transactions over the web.

Setup and Explore our Shopping Cart Application to Learn Redux with TypeScript

In this lesson we install [react-redux](https://react-redux.js.org/) and the [Redux Toolkit](https://redux-toolkit.js.org/) via NPM and then setup our own redux store using RTK's [configureStore](https://redux-toolkit.js.org/api/configureStore) method. After creating our store we wrap our entire `<App />` in the `<Provider>` component provided by `react-redux` which makes our newly created redux store accessible to any component in our application.

To install these components use:

```
npm install react-redux
npm install @reduxjs/toolkit
```

We usually place our redux store in a path of either `app/store.ts` or `store/index.ts`. 
In legacy redux applications it was common to use the `store/` folder and then have all kinds of `reducer` and `action` files inside of it. Now it's recommended by the [redux style guide](https://redux.js.org/style-guide/style-guide) to use an `app/` folder and the slices of the store should live in feature folders alongside the components that are using them. This application already splits up our components into various feature folders and app-wide or shared utilities are living in the `app` folder. 

Add Redux and the Redux Toolkit (RTK) to an Existing Application

The Redux Toolkit has helped codify the notion that instead of splitting up your redux store into various reducer files, action files, and selector files it should be split into slices. Each slice needs to own the shape of its part of the data and is generally responsible for owning any reducers, selectors or thunks that primarily access or manipulate that information.

It's important that the shape of the data for each slice is clearly defined at the top of the file. With TypeScript this is done with an interface. With plain JavaScript you can still indicate the shape of the data by fully filling out your `initialState`. Even when the data is `null` you can add a small comment indicating the expected shape.

RTK's [createSlice](https://redux-toolkit.js.org/api/createslice) method simplifies the way reducers are created. Reducers are the place where the redux state gets updated (or actually replaced). An action is passed in to our redux store and each of our reducers has a chance to respond to that action with a new state. Redux reducers without RTK usually feature giant switch statements looking for different action types. With RTK you define reducer methods and the actions and action types associated with those methods are automatically generated.

In `store.ts` we take all of the reducers generated by these slices and combine them back together into a single redux store with each slice of data owning one key on the main data store object.


Splitting our Redux Store into Multiple Slices using the createSlice Method

This is probably the most boilerplate you'll be asked to write throughout this whole course. Just copy these few lines of code from the [Usage with TypeScript](https://redux.js.org/usage/usage-with-typescript) section of the Redux docs into `store.ts` and `hooks.ts` and then use the `useAppSelector` and `useAppDispatch`  hooks instead of the ones built-in to `react-redux` and you'll have solved 80% of your typing needs with Redux. 

In addition to the typed hooks you'll use the `RootState` type any time you're creating a selector function and as we'll see later in this course sometimes with thunks as well It also may come in handy anytime you need to manually call `store.getState()`.

The TS syntax I was most interested in learning for this lesson was [ReturnType](https://www.typescriptlang.org/docs/handbook/utility-types.html#returntypetype), which is a utility that extracts the return type from the type definition of a function. In our case `ReturnType<typeof store.getState>` creates a type that matches whatever data we have in our redux store, based on the various interfaces we define in each slice.

Creating a RootState type and Typed Hooks for Type-Aware Redux Interactions

The [useSelector](https://react-redux.js.org/api/hooks#useselector) hook from react-redux is incredibly easy to use, but doesn't work super well with TypeScript. The `useAppSelector` function we created in the last lesson solves this by telling it that `state` is always going to be of the `RootState` type we created.

```
const products = useAppSelector((state) => state.products.products);
```

This only works with function components. Class components cannot use hooks and need to use the legacy [connect](https://react-redux.js.org/api/connect) higher order component to gain access to data in the redux store.

Once we type the `useAppSelector` method and our individual slices we don't need any special type syntax as its all covered by the `RootState` type we defined earlier.

Anytime the redux store changes, the selector function passed in to `useAppSelector` will be executed. If the value returned is not an exact match to the last returned value, redux will force the component to re-render.

`useSelector/useAppSelector` can also take a second argument, an equality function. Using `_.isEqual` from Lodash for example could help prevent additional renders in some cases. `react-redux` also includes a `shallowEqual` method that will compare all of the key/value pairs of an object one layer deep. That works well if your selector return an object made up of strings, numbers or booleans.

```
import { shallowEqual, useSelector } from 'react-redux'
const selectedData = useSelector(selectorReturningObject, shallowEqual)
```

Access Redux Data in a Component with the TypeScript-enabled useAppSelector hook

In react-redux the [useDispatch](ttps://react-redux.js.org/api/hooks#usedispatch) hook gives us access to our store's [dispatch](https://redux.js.org/api/store#dispatchaction) method. Dispatch is used to send actions into our redux store and is the only way we can affect the store from within a component.

```
const dispatch = useAppDispatch();
dispatch({ type: "featureName/actionName, payload: {} })
```

The only works with function components. Class components cannot use hooks and need to use the legacy [connect](https://react-redux.js.org/api/connect) higher order component and a [mapDispatchToProps](https://react-redux.js.org/using-react-redux/connect-mapdispatch) function to gain a way to dispatch actions from components.

Actions with redux are recommended to follow the [flux standard action](https://redux.js.org/style-guide/style-guide#write-actions-using-the-flux-standard-action-convention) format, which always includes `type` field and usually a `payload` key containing the primary data associated with the action. 

Create a Reducer with Redux Toolkit and Dispatch its Action with the useAppDispatch hook

Reducer methods in RTK's `createSlice` method take two arguments. The `state` and an action of type [PayloadAction](https://redux.js.org/usage/usage-with-typescript#application-usage). `PayloadAction` is a generic type that requires you to pass in the specific type of the payload you are expecting. In our case it's going to be `PayloadAction<string>`.

One thing that's really impressive about RTK is that it builds its reducers using [immer](https://github.com/immerjs/immer). Immer allows you to deal with immutable data in a seemingly mutable way. While it appears that we're directly modifying our cart state here, if you hover the `state` variable in your IDE you'll see it's actually of type `WritableDraft<CartState>`, which means it's a draft of your state. Any changes made there will captured by immer and converted into a single new state object that will replace your current one after your redux method is done running. It's pretty clever and much easier to write than the old redux way of having to make long copies of everything to avoid mutating the redux state directly!

Building a Reducer Method to add an Item to the Shopping Cart

As I say in the lesson a selector is just a function that takes in the redux state and returns any value. It could be as simple as `(state) => state.cart.items` or even `(state) => state`. But it's more common to create selector functions where there's some kind of processing to be done and that's what we do here. The redux store doesn't directly store the number of items in the cart, instead it stores an object with the the product ID and a number. We have to loop over that object and count it manually. A selector is a perfect place to do that calculation. Another place it could be done is in a `useMemo` hook in your react component.

Read more about selector functions here:
https://redux.js.org/usage/deriving-data-selectors

Create a Selector to Aggregate Data from our Redux Store

`createSelector` was brought in to RTK from the popular [reselect](https://github.com/reduxjs/reselect) library. While it's not needed to create selector functions, it makes it a lot easier to create efficient selectors that avoid doing more work than needed.

`createSelector` takes two types of arguments. There are `inputSelectors` (and there can be more than one of these) and then there's the `resultFunction`. You pass in these input selectors and then the result function processes the data that gets returned. As long as the input values don't change, the generated selector won't re-run the result function.

If the data you're working with isn't large or the calculations aren't complex, you don't really need to use `createSelector`. But it's a good tool to have in your toolbox.

---

Check out this link for more info:
https://github.com/reduxjs/reselect#createselectorinputselectors--inputselectors-resultfunc



Use createSelector from Redux Toolkit to build a Memoized Selector

This lesson is pretty straightforward but demonstrates how we're combining data from two different redux slices in a single component. We have product data from the `productsSlice` and shopping cart information from the `cartSlice`. Neither of these is sufficient on its own, so it requires us to combine them at render-time. It's pretty common to have 5 or 6 selector functions at the top of a large component.

**Note:** One thing missing from the lesson is that our `<tr>` element needs a `key={id}` to ensure React handles updates properly. You'll likely see a warning in your console about this.

Combining Data from Two Redux Slices to Build our Shopping Cart

In this lesson we take data from two different slices and combine the output in a single selector function. Because selectors get access to the entire `RootState` it's not hard to create these combinations. The other thing that's interesting here is that we're passing multiple input selectors into `createSelector`. You can read more about how that works below.

---

`createSelector` was brought in to RTK from the popular [reselect](https://github.com/reduxjs/reselect) library. While it's not needed to create selector functions, it makes it a lot easier to create efficient selectors that avoid doing more work than needed.

`createSelector` takes two types of arguments. There are `inputSelectors` (and there can be more than one of these) and then there's the `resultFunction`. You pass in these input selectors and then the result function processes the data that gets returned. As long as the input values don't change, the generated selector won't re-run the result function.

If the data you're working with isn't large or the calculations aren't complex, you don't really need to use `createSelector`. But it's a good tool to have in your toolbox.

---

Check out this link for more info:
https://github.com/reduxjs/reselect#createselectorinputselectors--inputselectors-resultfunc


Aggregate Price Information From Two Different Slices with createSelector

What I've found with nearly every method provided by RTK is that type support comes really easy. This is definitely true for the `createSelector` method. As long as you type the `state` argument on your input selectors, TypeScript can calculate your return value as well as the value of the various inputs to your result function. 

if you want to type the function fully you can use the following syntax:

````ts
createSelector<RootState, ResultInputType(s)..., ResultOutputType>(...)
```

---

More info about types in Redux can be found here:
https://redux.js.org/recipes/usage-with-typescript

How to Apply Types to Redux Selectors

This lesson creates a new reducer method called `removeFromCart` which accepts a product id as a string. We then add on `onClick` handler to our remove button that dispatches the `removeFromCart` action into our redux store.

One thing to consider is that it's important we avoid dispatching any kind of stale state into our redux store. React event handlers such as the onclick handler do a good job of keeping up-to-date when the component gets updated. If we were dispatching from a `useEffect` hook we'd need to ensure that any of our dispatched data, like the product id, was explicitly defined in the dependency array.

Here's a bit more info about the stale state issue:
https://reactjs.org/docs/hooks-faq.html#why-am-i-seeing-stale-props-or-state-inside-my-function

Adding a Button that Dispatches an Action To Redux to Remove an Item from the ShoppingCart

The Redux Style Guide explicitly recommends that you [avoid putting form state in redux](https://redux.js.org/style-guide/style-guide#avoid-putting-form-state-in-redux). Of course we do want to update our redux store with data that comes from user input at times, so how do we do it? Well, waiting until the form elements blurs is a good way. Otherwise you can imagine we'd be constantly dispatching redux actions and potentially re-rendering our whole app on every key press!

The other thing I wanted to demonstrate from this lesson was using the `React.FocusEvent` type when handling form events. It's very common for people to say `e: any` and lose type support on event handlers, but I think it's much nicer to provide the correct types where possible. Once you get the hang of it, it's very easy.

A full list of React Events can be found here:
https://reactjs.org/docs/events.html#supported-events

I also found the following resources to contain helpful information about typing react events:
- https://felixgerschau.com/react-typescript-events/
- https://fettblog.eu/typescript-react/events/

Dispatching Actions to Redux when an Input Field Fires its Blur Event with TypeScript

This lesson uses the excellent [classnames](https://www.npmjs.com/package/classnames) library to apply different formatting to our checkout page based on the current state of our form. To model those states we use TypeScript's string literals, which are great for simple situations like this. This lesson sets us up nicely for responding to all the actions generated by our checkout thunk, which we'll explore in the next lesson.

There's a great discussion here about when to use string literals over enums:
https://stackoverflow.com/questions/49761972/difference-between-string-enums-and-string-literal-types-in-ts


Using TypeScript and Redux to Model the Different States of our Checkout Form

In our previous lessons we relied on actions generated by our `createSlice` function. In this lesson we build our own. Thankfully action objects are very simple. It's recommended that they follow the [Flux Standard Action](https://github.com/redux-utilities/flux-standard-action#flux-standard-action) convention which typically looks something like this:

```ts
{
  type: "feature/action",
  payload: "some kind of data" // could be anything
}
```

In our case we dispatch the action `{ type: "cart/checkout/pending" }`.

To handle arbitrary actions in our slice, we use the `extraReducers` property and the [Builder API](https://redux-toolkit.js.org/api/createreducer#usage-with-the-builder-callback-notation) which provides a way to define cases for the reducer to handle without using the `switch` statement, so commonly found in legacy redux applications.





Handling Custom Actions in our Slice with extraReducers and the Builder API

Redux Toolkit comes baked in with support for [redux-thunk](https://github.com/reduxjs/redux-thunk) as the recommended way to model asynchronous actions. Thunks can take a bit of getting used to. A typical thunk looks something like this:

```ts
function myAction() {
   return function myActionThunk(dispatch) {
      dispatch({ type: "myAction" });
   }
}

// somewhere in the UI code
dispatch(myAction())
```

So you dispatch a function that is handled and executed by the middleware, and that function receives its own `dispatch` argument that it can use to send multiple actions into the redux store over time.

Thunks are most commonly used when dealing with API calls where you'd send an action to indicate an API call was started and another once the response is received. We model that here with `extraReducers` and the builder API listening for `cart/checkout/pending` and `cart/checkout/fulfilled` actions, which we dispatch from our single checkout thunk.


It's also worth noting why I'm calling a function to return my thunk rather than exporting the thunk function directly. First of all, you can export it directly, but it's common to wrap it like this, because you often want to pass in arguments from your UI layer that ultimately impact how the thunk is used.

For example you could imagine calling `dispatch(checkout(items))` and then passing those items into your API call in your thunk.

Another thing not mentioned in the lesson is that thunks take a second argument which is a `getState` function. This is useful in cases where your async call needs access to the current state object.


Using Thunks to Dispatch Actions Over Time

The key reason to use [createAsyncThunk](https://redux-toolkit.js.org/api/createAsyncThunk) is that it generates actions for each of the different outcomes for any promised-based async call: `pending`, `fulfilled`, and `rejected`. We then have to use the builder callback API on the extraReducers property to map these actions back into reducer methods we then use to update our state. It's a bit of of a process but it's simpler than the alternative, which is to create a bunch of actions by hand and manually dispatch them.

---

- [createAsyncThunk](https://redux-toolkit.js.org/api/createAsyncThunk) takes a `type` argument (which I referred to as a label) and a function called a `payloadCreator` which is basically just an async function (or function returning a promise) that goes and collects data. 

- The [builder API](https://redux-toolkit.js.org/api/createReducer#usage-with-the-builder-callback-notation) is one way to define `extraReducers` (you can also pass in an object with a string). It's semantically similar to a switch statement and includes methods like `addCase` and `addDefaultCase`.

Using createAsyncThunk and the builder API to Generate Redux Actions for an API call

When you're handling a thunk's rejected state with` builder.addCase` TypeScript is able to infer that your action includes an extra `error` property containing a serialized version of the error returned by your thunk. We use that here to update the `errorMessage` property in our cart state and display it to our users above the checkout button.

---

The [builder API](https://redux-toolkit.js.org/api/createReducer#usage-with-the-builder-callback-notation) is one way to define additional reducers to your slice. It's semantically similar to a switch statement and includes methods like `addCase` and `addDefaultCase`. You can also define `extraReducers` as an object with the action types as the keys. The difference between `reducers` and `extraReducers` being that RTK won't generate actions for you automatically on the `extraReducers` property, like it will for reducers added to `reducers`.

You can read more about errors from thunks here:
https://redux-toolkit.js.org/api/createAsyncThunk#payloadcreator




Handling Errors in Async Thunks with builder.addCase()

Any data coming back from our thunk's payloadCreator function is returned in the action payload. Here we'll look at the builder case for `checkoutCart.fulfilled` and type the action with `PayloadAction<{ success: boolean }>` and then update the global state based on that payload response.

Using the Response from an Async Thunk to Update the Redux State

The [payloadCreator](https://redux-toolkit.js.org/api/createAsyncThunk#payloadcreator) argument to `createAsyncThunk` takes two arguments. The first is a single `arg` that receives data passed into the thunk's action creator such as `dispatch(checkout(items))`. The second is called `thunkAPI` that contains something [like 7 different methods on it](https://redux-toolkit.js.org/api/createAsyncThunk#payloadcreator). Here we're going to use its `getState()` method to access the global state just before we make complete the checkout API call.  

When it comes to typing `createAsyncThunk` just like other RTK methods, it will mostly be typed by default. In this case we still need to tell it about our store. We can do that with `thunkAPI.getState() as RootState` which I think is the preferred way to handle the types here. If we really want to be thorough though, we can pass in the full types like this:

```ts
createAsyncThunk<
  PayloadResponse,
  ThunkArgument,
  { state: RootState }
>("slice/typeName", payloadCreator)
```

Accessing Global State inside of Async Thunks with TypeScript

In this lesson we install the [Redux Dev Tools](https://github.com/zalmoxisus/redux-devtools-extension#installation) extension into Chrome and demonstrate how it lets you inspect the various actions passing through your redux store as well as all of the data it contains. We also briefly demonstrate the time travel debugging capability as we walk back through and un-add items to our shopping cart.

The key here is that because we used [configureStore](https://redux-toolkit.js.org/api/configureStore) from RTK which automatically includes support for redux dev tool without having to explicitly turn it on.

Modern Redux with Redux Toolkit (RTK) and TypeScript

Instructor

Course content (23 lessons)

Instructor