How to Add Redux and TypeScript to React
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md
file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
Lesson Transcript
[00:00 - 00:07] Initial Setup. First let's prepare the browser. There are extensions for Chrome and Firefox.
[00:08 - 00:19] After you install the extension you should see the new tab in your developer tools called Redux. Try clicking this button on the page with the completed project running. You should see something like this.
[00:20 - 00:33] You will be able to see the state, the last dispatched action, you can inspect individual actions and use time travel. Play around a bit with Redux DevTools. After you feel comfortable with Redux DevTools create the project.
[00:34 - 00:45] Npx create react app template TypeScript. The name of the app is Redux Paint.
[00:46 - 00:59] Go to Redux Paint and install the dependencies. Yarn Add Redux React Redux. That's a bunch of helpers to connect React with Redux and types for React Redux.
[01:00 - 01:10] Redux itself is written in TypeScript so we don't need to install types for it separately. We also want to install Redux DevTools extension so that we can debug our application in the browser.
[01:11 - 01:18] Yarn Add Redux DevTools extension. Open the app and the code editor.
[01:19 - 01:27] Inside of the SRC create new file root reducer.ts. Let's define our initial reducer here.
[01:28 - 01:40] First let's define the type for our state. Type root state. For now it's going to be an empty object. Let's define the first action. Type action equals type string.
[01:41 - 01:48] In Redux actions are objects representing something like events. Your application will communicate with Redux state using those action objects.
[01:49 - 02:02] Each action must have a field called type of type string. Now define the root reducer. Export const root reducer state as type root state and default value is going to be empty object.
[02:03 - 02:09] Action will have type action. For now we'll just return the state without changing it.
[02:10 - 02:24] Now let's set up Redux create new file store.ts. Here we expert const store. We create it using create store passing root redu cer and the dev tools enhancer.
[02:25 - 02:36] Pass in an empty object to dev tools enhancer. We import create store from Redux, root reducer from the root reducer module and dev tools enhancer from the Redux dev tools extension.
[02:37 - 02:50] Now go to index.ts.x and wrap your app into a provider. Get it from React Redux passing the store from the store module and we're done. Launch the app. You should see the following.
[02:51 - 02:59] This rotating React logo and in the Redux dev tools you should see the first init action being fired. If you click on the state, it should be an empty object.
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
![Thumbnail for the \newline course Fullstack React with TypeScript Masterclass](/_next/image?url=https%3A%2F%2Fs3.amazonaws.com%2Fassets.fullstack.io%2Fn%2F20220425171607321_CoverImage_FSReactWTypeScript_Masterclas.png&w=3840&q=75)