-
# React & Redux in TypeScript - Complete Guide
-_"This guide is a **living compendium** documenting the most important patterns and recipes on how to use **React** (and its Ecosystem) in a **functional style** using **TypeScript**. It will help you make your code **completely type-safe** while focusing on **inferring the types from implementation** so there is less noise coming from excessive type annotations and it's easier to write and maintain correct types in the long run."_
-
-[](https://spectrum.chat/react-redux-ts)
-[](https://gitter.im/react-redux-typescript-guide/Lobby)
-
-_Found it useful? Want more updates?_
-
-[**Show your support by giving a :star:**](https://github.com/piotrwitek/react-redux-typescript-guide/stargazers)
-
-
-
-
-
-
-
-
-
-
-## **What's new?**
-
-:tada: _Now updated to support **TypeScript v4.6**_ :tada:
-:rocket: _Updated to `typesafe-actions@5.x` :rocket:
-
-
-
-
-
-### **Goals**
-
-- Complete type safety (with [`--strict`](https://www.typescriptlang.org/docs/handbook/compiler-options.html) flag) without losing type information downstream through all the layers of our application (e.g. no type assertions or hacking with `any` type)
-- Make type annotations concise by eliminating redundancy in types using advanced TypeScript Language features like **Type Inference** and **Control flow analysis**
-- Reduce repetition and complexity of types with TypeScript focused [complementary libraries](#react-redux-typescript-ecosystem)
-
-### **React, Redux, Typescript Ecosystem**
-
-- [typesafe-actions](https://github.com/piotrwitek/typesafe-actions) - Typesafe utilities for "action-creators" in Redux / Flux Architecture
-- [utility-types](https://github.com/piotrwitek/utility-types) - Collection of generic types for TypeScript, complementing built-in mapped types and aliases - think lodash for reusable types.
-- [react-redux-typescript-scripts](https://github.com/piotrwitek/react-redux-typescript-scripts) - dev-tools configuration files shared between projects based on this guide
-
-### **Examples**
-
-- Todo-App playground: [Codesandbox](https://codesandbox.io/s/github/piotrwitek/typesafe-actions/tree/master/codesandbox)
-- React, Redux, TypeScript - RealWorld App: [Github](https://github.com/piotrwitek/react-redux-typescript-realworld-app) | [Demo](https://react-redux-typescript-realworld-app.netlify.com/)
+> **"This guide will teach you how to use React (and its Ecosystem) in a functional style with TypeScript."**
-### **Playground Project**
+## What is this guide?
-[](https://semaphoreci.com/piotrekwitek/react-redux-typescript-guide)
+This is a **practical reference guide** that shows you how to use TypeScript with React and Redux through real-world code examples. It's not a boilerplate or starter templateβit's a collection of patterns, type definitions, and best practices you can copy into your own projects.
-Check out our Playground Project located in the `/playground` folder. It contains all source files of the code examples found in the guide. They are all tested with the most recent version of TypeScript and 3rd party type-definitions (like `@types/react` or `@types/react-redux`) to ensure the examples are up-to-date and not broken with updated definitions (It's based on `create-react-app --typescript`).
-> Playground project was created so that you can simply clone the repository locally and immediately play around with all the component patterns found in the guide. It will help you to learn all the examples from this guide in a real project environment without the need to create complicated environment setup by yourself.
+### Who is this for?
-## Contributing Guide
+- **React developers** learning TypeScript
+- **TypeScript developers** learning React
+- **Teams** wanting consistent patterns for React + TypeScript projects
+- **Beginners** who want to understand how to properly type React components, Redux stores, and async actions
-You can help make this project better by contributing. If you're planning to contribute please make sure to check our contributing guide: [CONTRIBUTING.md](/CONTRIBUTING.md)
+### What you'll learn
-## Funding
+- How to type React components (functional and class-based)
+- How to type Redux stores, actions, and reducers
+- How to type React hooks (`useState`, `useEffect`, `useContext`, etc.)
+- How to type async operations and side effects
+- How to type HOCs (Higher-Order Components) and render props
+- How to type forms, events, and refs
+- Common TypeScript patterns that make React code safer and more maintainable
-You can also help by funding issues.
-Issues like bug fixes or feature requests can be very quickly resolved when funded through the IssueHunt platform.
+### How to use this guide
-I highly recommend to add a bounty to the issue that you're waiting for to increase priority and attract contributors willing to work on it.
+1. **Browse by topic** - Use the table of contents to jump to the pattern you need
+2. **Copy examples** - Each section has copy-paste-ready code snippets
+3. **Understand the types** - We explain what each TypeScript type does and why it's useful
+4. **Try the playground** - Run `npm install && npm start` in the `playground` folder to see live examples
-[](https://issuehunt.io/repos/76996763)
+> π‘ **Note for beginners**: Types like `React.FC`, `React.ComponentProps`, and `Dispatch` come from the `@types/react` and `@types/react-redux` packagesβthey're not custom to this guide. We show you how to use the official types that TypeScript provides for React.
---
-π - _New or updated section_
-
## Table of Contents
-
- - [React Types Cheatsheet](#react-types-cheatsheet)
- - [`React.FC` | `React.FunctionComponent`](#reactfcprops--reactfunctioncomponentprops)
- - [`React.Component`](#reactcomponentprops-state)
- - [`React.ComponentType`](#reactcomponenttypeprops)
- - [`React.ComponentProps`](#reactcomponentpropstypeof-xxx)
- - [`React.ReactElement` | `JSX.Element`](#reactreactelement--jsxelement)
- - [`React.ReactNode`](#reactreactnode)
- - [`React.CSSProperties`](#reactcssproperties)
- - [`React.XXXHTMLAttributes`](#reactxxxhtmlattributeshtmlxxxelement)
- - [`React.ReactEventHandler`](#reactreacteventhandlerhtmlxxxelement)
- - [`React.XXXEvent`](#reactxxxeventhtmlxxxelement)
-- [React](#react)
- - [Function Components - FC](#function-components---fc)
- - [- Counter Component](#--counter-component)
- - [- Counter Component with default props](#--counter-component-with-default-props)
- - [- Spreading attributes in Component](#--spreading-attributes-in-component)
- - [Class Components](#class-components)
- - [- Class Counter Component](#--class-counter-component)
- - [- Class Component with default props](#--class-component-with-default-props)
- - [Generic Components](#generic-components)
- - [- Generic List Component](#--generic-list-component)
- - [Hooks](#hooks)
- - [- useState](#--usestate)
- - [- useContext](#--usecontext)
- - [- useReducer](#--usereducer)
- - [Render Props](#render-props)
- - [- Name Provider Component](#--name-provider-component)
- - [- Mouse Provider Component](#--mouse-provider-component)
- - [Higher-Order Components](#higher-order-components)
- - [- HOC wrapping a component](#--hoc-wrapping-a-component)
- - [- HOC wrapping a component and injecting props](#--hoc-wrapping-a-component-and-injecting-props)
- - [- Nested HOC - wrapping a component, injecting props and connecting to redux π](#--nested-hoc---wrapping-a-component-injecting-props-and-connecting-to-redux-)
- - [Redux Connected Components](#redux-connected-components)
- - [- Redux connected counter](#--redux-connected-counter)
- - [- Redux connected counter with own props](#--redux-connected-counter-with-own-props)
- - [- Redux connected counter via hooks](#--redux-connected-counter-via-hooks)
- - [- Redux connected counter with `redux-thunk` integration](#--redux-connected-counter-with-redux-thunk-integration)
- - [Context](#context)
- - [ThemeContext](#themecontext)
- - [ThemeProvider](#themeprovider)
- - [ThemeConsumer](#themeconsumer)
- - [ThemeConsumer in class component](#themeconsumer-in-class-component)
-- [Redux](#redux)
- - [Store Configuration](#store-configuration)
- - [Create Global Store Types](#create-global-store-types)
- - [Create Store](#create-store)
- - [Action Creators π](#action-creators-)
- - [Reducers](#reducers)
- - [State with Type-level Immutability](#state-with-type-level-immutability)
- - [Typing reducer](#typing-reducer)
- - [Typing reducer with `typesafe-actions`](#typing-reducer-with-typesafe-actions)
- - [Testing reducer](#testing-reducer)
- - [Async Flow with `redux-observable`](#async-flow-with-redux-observable)
- - [Typing epics](#typing-epics)
- - [Testing epics](#testing-epics)
- - [Selectors with `reselect`](#selectors-with-reselect)
- - [Connect with `react-redux`](#connect-with-react-redux)
- - [Typing connected component](#typing-connected-component)
- - [Typing `useSelector` and `useDispatch`](#typing-useselector-and-usedispatch)
- - [Typing connected component with `redux-thunk` integration](#typing-connected-component-with-redux-thunk-integration)
-- [Configuration & Dev Tools](#configuration--dev-tools)
- - [Common Npm Scripts](#common-npm-scripts)
- - [tsconfig.json](#tsconfigjson)
- - [TSLib](#tslib)
- - [ESLint](#eslint)
- - [.eslintrc.js](#eslintrcjs)
- - [Jest](#jest)
- - [jest.config.json](#jestconfigjson)
- - [jest.stubs.js](#jeststubsjs)
- - [Style Guides](#style-guides)
- - [react-styleguidist](#react-styleguidist)
-- [FAQ](#faq)
- - [Ambient Modules](#ambient-modules)
- - [Imports in ambient modules](#imports-in-ambient-modules)
- - [Type-Definitions](#type-definitions)
- - [Missing type-definitions error](#missing-type-definitions-error)
- - [Using custom `d.ts` files for npm modules](#using-custom-dts-files-for-npm-modules)
- - [Type Augmentation](#type-augmentation)
- - [Augmenting library internal declarations - using relative import](#augmenting-library-internal-declarations---using-relative-import)
- - [Augmenting library public declarations - using node_modules import](#augmenting-library-public-declarations---using-node_modules-import)
- - [Misc](#misc)
- - [- should I still use React.PropTypes in TS?](#--should-i-still-use-reactproptypes-in-ts)
- - [- when to use `interface` declarations and when `type` aliases?](#--when-to-use-interface-declarations-and-when-type-aliases)
- - [- what's better default or named exports?](#--whats-better-default-or-named-exports)
- - [- how to best initialize class instance or static properties?](#--how-to-best-initialize-class-instance-or-static-properties)
- - [- how to best declare component handler functions?](#--how-to-best-declare-component-handler-functions)
-- [Tutorials & Articles](#tutorials--articles)
-- [Contributors](#contributors)
-
---
-# Installation
-
-## Types for React & Redux
-
-```
-npm i -D @types/react @types/react-dom @types/react-redux
-```
-
-"react" - `@types/react`
-"react-dom" - `@types/react-dom`
-"redux" - (types included with npm package)*
-"react-redux" - `@types/react-redux`
+## Goals
-> *NB: Guide is based on types for Redux >= v4.x.x.
-
-[β§ back to top](#table-of-contents)
+- **Complete type safety** - Catch errors at compile time, not runtime
+- **Functional programming style** - Leverage TypeScript's type inference with modern React patterns (hooks, functional components)
+- **Practical examples** - Real-world patterns you can use immediately
+- **Standard types** - Use official types from `@types/react` and `@types/react-redux` (no custom magic)
+- **Minimal boilerplate** - Write less code while getting more type safety
---
-## React Types Cheatsheet
-
-### `React.FC` | `React.FunctionComponent`
-
-Type representing a functional component
-
-```tsx
-const MyComponent: React.FC = ...
-```
-
-### `React.Component`
-
-Type representing a class component
-
-```tsx
-class MyComponent extends React.Component { ...
-```
-
-### `React.ComponentType`
-
-Type representing union of (`React.FC | React.Component`) - used in HOC
-
-```tsx
-const withState =
(
- WrappedComponent: React.ComponentType
,
-) => { ...
-```
-
-### `React.ComponentProps`
-
-Gets Props type of a specified component XXX (WARNING: does not work with statically declared default props and generic props)
-
-```tsx
-type MyComponentProps = React.ComponentProps;
-```
-
-### `React.ReactElement` | `JSX.Element`
-
-Type representing a concept of React Element - representation of a native DOM component (e.g. ``), or a user-defined composite component (e.g. ``)
-
-```tsx
-const elementOnly: React.ReactElement = || ;
-```
-
-### `React.ReactNode`
-
-Type representing any possible type of React node (basically ReactElement (including Fragments and Portals) + primitive JS types)
-
-```tsx
-const elementOrPrimitive: React.ReactNode = 'string' || 0 || false || null || undefined || || ;
-const Component = ({ children: React.ReactNode }) => ...
-```
-
-### `React.CSSProperties`
-
-Type representing style object in JSX - for css-in-js styles
-
-```tsx
-const styles: React.CSSProperties = { flexDirection: 'row', ...
-const element =
`
-
-Type representing HTML attributes of specified HTML Element - for extending HTML Elements
-
-```tsx
-const Input: React.FC> = props => { ... }
-
-
-```
-
-### `React.ReactEventHandler`
-
-Type representing generic event handler - for declaring event handlers
-
-```tsx
-const handleChange: React.ReactEventHandler = (ev) => { ... }
-
-
-```
-
-### `React.XXXEvent`
-
-Type representing more specific event. Some common event examples: `ChangeEvent, FormEvent, FocusEvent, KeyboardEvent, MouseEvent, DragEvent, PointerEvent, WheelEvent, TouchEvent`.
-
-```tsx
-const handleChange = (ev: React.MouseEvent) => { ... }
-
-
-```
+## Complementary Projects
-In code above `React.MouseEvent` is type of mouse event, and this event happened on `HTMLDivElement`
+This guide focuses on **type patterns**. For complete project setups, see:
-[β§ back to top](#table-of-contents)
+- [react-redux-typescript-jslib-starter](https://github.com/piotrwitek/react-redux-typescript-jslib-starter) - Ready-to-use starter with build config, testing, and CI
+- [typesafe-actions](https://github.com/piotrwitek/typesafe-actions) - Type-safe Redux action creators and reducers
+- [utility-types](https://github.com/piotrwitek/utility-types) - Reusable TypeScript utility types
---
-# React
-
-## Function Components - FC
+## Understanding the Playground
-### - Counter Component
+The `playground` folder contains a working React app that demonstrates all the patterns in this guide.
-```tsx
-import * as React from 'react';
-
-type Props = {
- label: string;
- count: number;
- onIncrement: () => void;
-};
-
-export const FCCounter: React.FC = props => {
- const { label, count, onIncrement } = props;
-
- const handleIncrement = () => {
- onIncrement();
- };
-
- return (
-
- {/*
- Instead of providing a static representation of what renders,
- use the `render` prop to dynamically determine what to render.
- */}
- {this.props.render(this.state)}
-
-
-[β§ back to top](#table-of-contents)
-
-## TSLib
-
-This library will cut down on your bundle size, thanks to using external runtime helpers instead of adding them per each file.
-
->
-
-> Installation
-`npm i tslib`
-
-
-Then add this to your `tsconfig.json`:
-
-```ts
-"compilerOptions": {
- "importHelpers": true
-}
-```
-
-[β§ back to top](#table-of-contents)
-
-## ESLint
-
-We have recommended config that will automatically add a parser & plugin for TypeScript thanks to [`react-redux-typescript-scripts`](https://github.com/piotrwitek/react-redux-typescript-scripts) package.
-
->
-
-> Installation
-`npm i -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin`
-
-
-### .eslintrc.js
-
-Click to expand
-
-[β§ back to top](#table-of-contents)
-
-## Jest
-
->
-
-> Installation
-`npm i -D jest ts-jest @types/jest`
-
-### jest.config.json
-
-Click to expand
-
-
- 
-
-
-
