piotrwitek/react-redux-typescript-guide

★ 13,303TypeScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((repo))
    What it does
      TypeScript patterns
      Copy-paste recipes
      React and Redux types
    Topics Covered
      Function components
      Redux reducers
      Async data flows
      React hooks
      Context providers
    Companion Tools
      typesafe-actions
      utility-types
      Playground project
    Audience
      TypeScript learners
      React developers

mindmap root((repo)) What it does TypeScript patterns Copy-paste recipes React and Redux types Topics Covered Function components Redux reducers Async data flows React hooks Context providers Companion Tools typesafe-actions utility-types Playground project Audience TypeScript learners React developers

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Copy a working TypeScript pattern for Redux reducers, action creators, or async flows directly into your project.

USE CASE 2

Look up how to add types to React hooks, context providers, or higher-order components without writing boilerplate.

USE CASE 3

Run the included playground project to experiment with all patterns without setting up your own environment.

USE CASE 4

Migrate an existing React and Redux JavaScript project to TypeScript using the guide's patterns as a reference.

Tech stack

TypeScriptReactReduxtypesafe-actionsutility-types

Getting it running

Difficulty · easy Time to first run · 5min

Clone and run npm install in the /playground folder to try all examples immediately with no extra setup required.

In plain English

This repository is a reference guide for developers building web apps with React and Redux who want to use TypeScript, a version of JavaScript that catches coding errors before the app runs. The guide documents patterns and recipes for keeping code fully type-checked from the user interface layer down through the data management layer, without requiring excessive type annotations throughout. The guide covers the most common building blocks you encounter in a React and Redux project: function components, class components, generic components, React hooks, context providers, and higher-order components. On the Redux side, it shows how to type your data store configuration, action creators, reducers, and async data flows. Each section presents short, concrete code examples rather than lengthy explanations, so readers can copy a working pattern directly into their own project. A companion Playground Project lives in the repository's /playground folder. You can clone the repository, open that folder, and run the examples immediately without setting up your own environment. All examples are kept in sync with the latest versions of TypeScript and the relevant type-definition packages, so they reflect current best practices rather than outdated syntax. The guide also references three companion libraries from the same author: typesafe-actions for creating Redux actions with full type safety, utility-types for reusable generic TypeScript types, and react-redux-typescript-scripts for shared developer tooling configuration. These are separate packages, not bundled inside this repository. The project was updated to support TypeScript v4.6 and typesafe-actions v5.x. The full README is longer than what was shown.

Copy-paste prompts

Prompt 1

Using the react-redux-typescript-guide patterns, show me how to write a typed Redux reducer and action creators for a shopping cart feature in TypeScript.

Prompt 2

I'm adding TypeScript to my React project. Show me the correct pattern from react-redux-typescript-guide for typing a custom hook that fetches data and returns loading, error, and data states.

Prompt 3

How do I type a Redux async thunk in TypeScript according to react-redux-typescript-guide to fetch user data from an API and handle errors?

Prompt 4

Show me the react-redux-typescript-guide pattern for creating a typed React context provider that holds user authentication state.

Open on GitHub → Explain another repo

← piotrwitek on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.