How to Add Redux and TypeScript to React

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