# piotrwitek/react-redux-typescript-guide

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/piotrwitek-react-redux-typescript-guide).**

13,292 stars · 1,103 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/piotrwitek/react-redux-typescript-guide
- Homepage: https://piotrwitek.github.io/react-redux-typescript-guide/
- awesome-repositories: https://awesome-repositories.com/repository/piotrwitek-react-redux-typescript-guide.md

## Topics

`flow` `guide` `guidelines` `patterns` `react` `redux` `static-typing` `style-guide` `typescript`

## Description

This project is a technical reference for implementing static typing in applications built with React and Redux. It provides a comprehensive guide for establishing type-safe state management, focusing on the configuration of stores, actions, and reducers using TypeScript type inference and unions.

The guide covers architectural patterns for defining props, generic components, and higher-order components with strict type definitions. It also provides methods for managing ambient type configurations and augmenting third-party modules to resolve missing or incorrect TypeScript definitions.

The documentation includes instructions for typing Redux middleware, asynchronous workflows, and observable streams. It further details the implementation of type-safe Redux workflows, including the use of tagged unions for state transitions and the creation of memoized state selectors.

## Tags

### Education & Learning Resources

- [React Typing Guides](https://awesome-repositories.com/f/education-learning-resources/react-typing-guides.md) — Provides a comprehensive technical reference for implementing static typing and type-safe patterns in React and Redux applications.

### Software Engineering & Architecture

- [Type-Safe State Management](https://awesome-repositories.com/f/software-engineering-architecture/type-safe-state-management.md) — Establishes a comprehensive guide for configuring type-safe Redux stores using TypeScript inference. ([source](https://github.com/piotrwitek/react-redux-typescript-guide/blob/master/README_SOURCE.md))
- [Type-Safe State Definitions](https://awesome-repositories.com/f/software-engineering-architecture/architectural-design-patterns/state-management/state-logic-and-utilities/type-safe-state-definitions.md) — Establishes type-safe state trees and action unions to maintain consistency across data handlers. ([source](https://github.com/piotrwitek/react-redux-typescript-guide#readme))
- [Generic Component Architectures](https://awesome-repositories.com/f/software-engineering-architecture/generic-component-architectures.md) — Implements design patterns for building reusable, type-safe UI components using TypeScript generics.
- [Discriminated Action Typing](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/layering-presentation/application-layer-architectures/state-management-architectures/action-reducer-architectures/action-reducer-patterns/discriminated-action-typing.md) — Uses discriminated unions for action types to ensure reducers only handle valid payloads for specific events.
- [Component State Bindings](https://awesome-repositories.com/f/software-engineering-architecture/architectural-design-patterns/state-management/reactive-subscription-systems/component-state-bindings.md) — Binds functional components to a centralized Redux store using type-safe wrappers and hooks. ([source](https://github.com/piotrwitek/react-redux-typescript-guide/blob/master/README_SOURCE.md))
- [Observable Streams](https://awesome-repositories.com/f/software-engineering-architecture/flow-modularization/modular-flow-composition/observable-streams.md) — Defines side-effect logic using typed observable streams to ensure safety in asynchronous Redux workflows. ([source](https://github.com/piotrwitek/react-redux-typescript-guide/blob/master/README.md))
- [Immutable State Patterns](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/layering-presentation/application-layer-architectures/state-management-architectures/immutable-data-strategies/immutable-state-patterns.md) — Applies immutable modifiers to the global state tree to prevent accidental mutations during compilation.

### Programming Languages & Runtimes

- [State Type Inference](https://awesome-repositories.com/f/programming-languages-runtimes/language-features-paradigms/type-system-tools/type-safety/state-type-inference.md) — Demonstrates how to derive root state and dispatch types directly from the store instance via type inference.
- [Generic Component Definitions](https://awesome-repositories.com/f/programming-languages-runtimes/language-features-paradigms/type-system-tools/type-system-integrations/generic-component-definitions.md) — Creates reusable UI patterns that accept generic type parameters for props and state. ([source](https://github.com/piotrwitek/react-redux-typescript-guide/blob/master/README_SOURCE.md))
- [Ambient Type Declarations](https://awesome-repositories.com/f/programming-languages-runtimes/language-features-paradigms/type-system-tools/type-definitions/ambient-type-declarations.md) — Offers guidance on defining custom type declarations and augmenting third-party modules. ([source](https://github.com/piotrwitek/react-redux-typescript-guide/blob/master/README.md))
- [External Type Definition Overrides](https://awesome-repositories.com/f/programming-languages-runtimes/language-features-paradigms/type-system-tools/type-definitions/external-type-definition-overrides.md) — Provides techniques for augmenting third-party module declarations to fix missing or incorrect TypeScript definitions. ([source](https://github.com/piotrwitek/react-redux-typescript-guide#readme))
- [Global Type Augmentations](https://awesome-repositories.com/f/programming-languages-runtimes/programming-language-varieties/programming-languages/type-systems/typescript-declaration-tooling/global-type-augmentations.md) — Defines custom type declarations and augments third-party modules to resolve missing TypeScript definitions.
- [Ambient Module Augmentations](https://awesome-repositories.com/f/programming-languages-runtimes/programming-language-varieties/programming-languages/type-systems/typescript-declaration-tooling/global-type-augmentations/dual-module-declarations/ambient-module-augmentations.md) — Provides methods for augmenting third-party modules to resolve missing or incorrect TypeScript definitions.
- [Type-Safe Action Creators](https://awesome-repositories.com/f/programming-languages-runtimes/state-action-generators/type-safe-action-creators.md) — Provides patterns for automating the creation of action functions with enforced payload shapes. ([source](https://github.com/piotrwitek/react-redux-typescript-guide#readme))

### User Interface & Experience

- [Higher-Order Components](https://awesome-repositories.com/f/user-interface-experience/functional-components/higher-order-components.md) — Provides architectural patterns for wrapping components to inject shared logic while preserving strict type definitions.
- [Component Patterns](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/rendering-models/composition-rendering-patterns/component-patterns.md) — Provides architectural guidelines for defining props and generic components with strict type definitions.

### Web Development

- [Component Type Interfaces](https://awesome-repositories.com/f/web-development/component-type-interfaces.md) — Defines strict interfaces for props, state, and attributes to ensure React components receive correct data. ([source](https://github.com/piotrwitek/react-redux-typescript-guide/blob/master/README_SOURCE.md))
- [Asynchronous Middleware](https://awesome-repositories.com/f/web-development/asynchronous-middleware.md) — Provides instructions for typing asynchronous middleware, observable streams, and state selectors in Redux.
- [Component Composition](https://awesome-repositories.com/f/web-development/component-composition.md) — Uses higher-order components and generic patterns to share logic across UI elements while preserving type signatures.
- [Component State Managers](https://awesome-repositories.com/f/web-development/component-state-managers.md) — Integrates UI elements with a state container using strictly typed hooks and functions. ([source](https://github.com/piotrwitek/react-redux-typescript-guide/blob/master/README.md))
- [Typed Redux Connectors](https://awesome-repositories.com/f/web-development/component-type-interfaces/typed-redux-connectors.md) — Maps store data and dispatch properties to components while preserving type signatures for hooks. ([source](https://github.com/piotrwitek/react-redux-typescript-guide#readme))
- [State Selectors](https://awesome-repositories.com/f/web-development/derived-state/state-selectors.md) — Provides patterns for creating type-safe state selectors to derive specific data slices from the Redux state tree. ([source](https://github.com/piotrwitek/react-redux-typescript-guide/blob/master/README.md))
- [Typed](https://awesome-repositories.com/f/web-development/derived-state/state-selectors/typed.md) — Implements typed, memoized selectors to derive specific data slices while preserving strict type signatures.
- [Ambient Type Augmentations](https://awesome-repositories.com/f/web-development/third-party-integrations/ambient-type-augmentations.md) — Provides methods for managing ambient types and augmenting external module declarations for third-party libraries.