[
{
"path": ".all-contributorsrc",
"content": "{\n \"projectName\": \"react-redux-typescript-guide\",\n \"projectOwner\": \"piotrwitek\",\n \"repoType\": \"github\",\n \"repoHost\": \"https://github.com\",\n \"files\": [\n \"./CONTRIBUTORS.md\"\n ],\n \"imageSize\": 100,\n \"commit\": false,\n \"contributors\": [\n {\n \"login\": \"piotrwitek\",\n \"name\": \"Piotrek Witek\",\n \"avatar_url\": \"https://avatars0.githubusercontent.com/u/739075?v=4\",\n \"profile\": \"https://github.com/piotrwitek\",\n \"contributions\": [\n \"code\",\n \"doc\",\n \"ideas\",\n \"review\",\n \"question\"\n ]\n },\n {\n \"login\": \"kazup01\",\n \"name\": \"Kazz Yokomizo\",\n \"avatar_url\": \"https://avatars3.githubusercontent.com/u/8602615?v=4\",\n \"profile\": \"https://github.com/kazup01\",\n \"contributions\": [\n \"financial\",\n \"fundingFinding\"\n ]\n },\n {\n \"login\": \"jakeboone02\",\n \"name\": \"Jake Boone\",\n \"avatar_url\": \"https://avatars1.githubusercontent.com/u/366438?v=4\",\n \"profile\": \"https://github.com/jakeboone02\",\n \"contributions\": [\n \"doc\"\n ]\n },\n {\n \"login\": \"amitdahan\",\n \"name\": \"Amit Dahan\",\n \"avatar_url\": \"https://avatars1.githubusercontent.com/u/9748762?v=4\",\n \"profile\": \"https://github.com/amitdahan\",\n \"contributions\": [\n \"doc\"\n ]\n },\n {\n \"login\": \"gulderov\",\n \"name\": \"gulderov\",\n \"avatar_url\": \"https://avatars1.githubusercontent.com/u/98167?v=4\",\n \"profile\": \"https://github.com/gulderov\",\n \"contributions\": [\n \"doc\"\n ]\n },\n {\n \"login\": \"emp823\",\n \"name\": \"Erik Pearson\",\n \"avatar_url\": \"https://avatars1.githubusercontent.com/u/1964212?v=4\",\n \"profile\": \"https://github.com/emp823\",\n \"contributions\": [\n \"doc\"\n ]\n },\n {\n \"login\": \"flymason\",\n \"name\": \"Bryan Mason\",\n \"avatar_url\": \"https://avatars1.githubusercontent.com/u/5342677?v=4\",\n \"profile\": \"https://github.com/flymason\",\n \"contributions\": [\n \"doc\"\n ]\n },\n {\n \"login\": \"chodorowicz\",\n \"name\": \"Jakub Chodorowicz\",\n \"avatar_url\": \"https://avatars1.githubusercontent.com/u/119451?v=4\",\n \"profile\": \"http://www.jakub.chodorowicz.pl/\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"mleg\",\n \"name\": \"Oleg Maslov\",\n \"avatar_url\": \"https://avatars1.githubusercontent.com/u/7266431?v=4\",\n \"profile\": \"https://github.com/mleg\",\n \"contributions\": [\n \"bug\"\n ]\n },\n {\n \"login\": \"awestbro\",\n \"name\": \"Aaron Westbrook\",\n \"avatar_url\": \"https://avatars0.githubusercontent.com/u/3393293?v=4\",\n \"profile\": \"https://github.com/awestbro\",\n \"contributions\": [\n \"bug\"\n ]\n },\n {\n \"login\": \"peterblazejewicz\",\n \"name\": \"Peter Blazejewicz\",\n \"avatar_url\": \"https://avatars3.githubusercontent.com/u/14539?v=4\",\n \"profile\": \"http://www.linkedin.com/in/peterblazejewicz\",\n \"contributions\": [\n \"doc\"\n ]\n },\n {\n \"login\": \"rubysolo\",\n \"name\": \"Solomon White\",\n \"avatar_url\": \"https://avatars3.githubusercontent.com/u/1642?v=4\",\n \"profile\": \"https://github.com/rubysolo\",\n \"contributions\": [\n \"doc\"\n ]\n },\n {\n \"login\": \"pino\",\n \"name\": \"Levi Rocha\",\n \"avatar_url\": \"https://avatars2.githubusercontent.com/u/8838006?v=4\",\n \"profile\": \"https://github.com/pino\",\n \"contributions\": [\n \"doc\"\n ]\n },\n {\n \"login\": \"loadbalance-sudachi-kun\",\n \"name\": \"Sudachi-kun\",\n \"avatar_url\": \"https://avatars1.githubusercontent.com/u/41281835?v=4\",\n \"profile\": \"http://cloudnative.co.jp\",\n \"contributions\": [\n \"financial\"\n ]\n },\n {\n \"login\": \"sosukesuzuki\",\n \"name\": \"Sosuke Suzuki\",\n \"avatar_url\": \"https://avatars1.githubusercontent.com/u/14838850?v=4\",\n \"profile\": \"http://sosukesuzuki.github.io\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"chillitom\",\n \"name\": \"Tom Rathbone\",\n \"avatar_url\": \"https://avatars0.githubusercontent.com/u/74433?v=4\",\n \"profile\": \"https://github.com/chillitom\",\n \"contributions\": [\n \"doc\"\n ]\n },\n {\n \"login\": \"arshadkazmi42\",\n \"name\": \"Arshad Kazmi\",\n \"avatar_url\": \"https://avatars3.githubusercontent.com/u/4654382?v=4\",\n \"profile\": \"https://arshadkazmi42.github.io/\",\n \"contributions\": [\n \"doc\"\n ]\n },\n {\n \"login\": \"JeongUkJae\",\n \"name\": \"JeongUkJae\",\n \"avatar_url\": \"https://avatars1.githubusercontent.com/u/8815362?v=4\",\n \"profile\": \"https://jeongukjae.github.io\",\n \"contributions\": [\n \"doc\"\n ]\n }\n ]\n}\n"
},
{
"path": ".github/FUNDING.yml",
"content": "# These are supported funding model platforms\n\ngithub: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]\npatreon: piotrekwitek # Replace with a single Patreon username\nopen_collective: # Replace with a single Open Collective username\nko_fi: # Replace with a single Ko-fi username\ntidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel\ncommunity_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry\nliberapay: # Replace with a single Liberapay username\nissuehunt: piotrwitek # Replace with a single IssueHunt username\notechie: # Replace with a single Otechie username\ncustom: [\"https://www.buymeacoffee.com/piotrekwitek\"] # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']\n"
},
{
"path": ".github/ISSUE_TEMPLATE/bug_report.md",
"content": "---\nname: Bug report\nabout: Create a report to help us improve\n---\n\n## Description\n\n\n## Steps to Reproduce\n\n\n## Expected behavior\n\n\n## Suggested solution(s)\n\n\n## Project Dependencies\n- TypeScript Version: X.X.X\n- tsconfig.json:\n\n\n## Environment (optional)\n\n- Browser and Version: XXX\n- OS: XXX\n- Node Version: XXX\n- Package Manager and Version: XXX\n"
},
{
"path": ".github/ISSUE_TEMPLATE/custom.md",
"content": "---\nname: Question\nabout: Have a question? Please check our spectrum community chat.\n---\n\nFirst of all please check our spectrum community chat and we recommend to ask your question there for a quickest response and the indexing in search engines: \n- https://spectrum.chat/react-redux-ts\n\nThe only good reason to use issue tracker for your questions would be for \"special requests\" that doesn't fit into bug reports and feature requests categories.\n"
},
{
"path": ".github/ISSUE_TEMPLATE/feature_request.md",
"content": "---\nname: Feature request\nabout: Suggest an idea for this project\n---\n\n## Is your feature request related to a real problem or use-case?\n\n\n## Describe a solution including usage in code example\n\n\n## Who does this impact? Who is this for?\n\n\n## Describe alternatives you've considered (optional)\n\n\n## Additional context (optional)\n\n"
},
{
"path": ".github/PULL_REQUEST_TEMPLATE.md",
"content": "\n\n\n## Description\n\n\n## Related issues:\n- Resolved #XXX\n\n## Checklist\n\n* [ ] I have read [CONTRIBUTING.md](https://github.com/piotrwitek/react-redux-typescript-guide/blob/master/CONTRIBUTING.md)\n* [ ] I have edited `README_SOURCE.md` (NOT `README.md`)\n* [ ] I have run CI script locally `npm run ci-check` to generate an updated `README.md`\n* [ ] I have linked all related issues above\n* [ ] I have rebased my branch\n\n"
},
{
"path": ".gitignore",
"content": "# Logs\nlogs\n*.log\nnpm-debug.log*\n\n# Runtime data\npids\n*.pid\n*.seed\n\n# Directory for instrumented libs generated by jscoverage/JSCover\nlib-cov\n\n# Coverage directory used by tools like istanbul\ncoverage\n\n# nyc test coverage\n.nyc_output\n\n# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)\n.grunt\n\n# node-waf configuration\n.lock-wscript\n\n# Compiled binary addons (http://nodejs.org/api/addons.html)\nbuild/Release\n\n# Dependency directories\nnode_modules\njspm_packages\n\n# Optional npm cache directory\n.npm\n\n# Optional REPL history\n.node_repl_history\n\ntemp/\nplayground/dist\nplayground/storybook-static\n"
},
{
"path": ".vscode/launch.json",
"content": "{\n // Use IntelliSense to learn about possible attributes.\n // Hover to view descriptions of existing attributes.\n // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387\n \"version\": \"0.2.0\",\n \"configurations\": [\n {\n \"type\": \"pwa-chrome\",\n \"request\": \"launch\",\n \"name\": \"Launch Chrome against localhost\",\n \"url\": \"http://localhost:3080\",\n \"webRoot\": \"${workspaceFolder}/playground/src\",\n \"sourceMapPathOverrides\": {\n \"webpack:///src/*\": \"${webRoot}/*\"\n }\n }\n ]\n}\n"
},
{
"path": "CODE_OF_CONDUCT.md",
"content": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, we as\ncontributors and maintainers pledge to making participation in our project and\nour community a harassment-free experience for everyone, regardless of age, body\nsize, disability, ethnicity, sex characteristics, gender identity and expression,\nlevel of experience, education, socio-economic status, nationality, personal\nappearance, race, religion, or sexual identity and orientation.\n\n## Our Standards\n\nExamples of behavior that contributes to creating a positive environment\ninclude:\n\n* Using welcoming and inclusive language\n* Being respectful of differing viewpoints and experiences\n* Gracefully accepting constructive criticism\n* Focusing on what is best for the community\n* Showing empathy towards other community members\n\nExamples of unacceptable behavior by participants include:\n\n* The use of sexualized language or imagery and unwelcome sexual attention or\n advances\n* Trolling, insulting/derogatory comments, and personal or political attacks\n* Public or private harassment\n* Publishing others' private information, such as a physical or electronic\n address, without explicit permission\n* Other conduct which could reasonably be considered inappropriate in a\n professional setting\n\n## Our Responsibilities\n\nProject maintainers are responsible for clarifying the standards of acceptable\nbehavior and are expected to take appropriate and fair corrective action in\nresponse to any instances of unacceptable behavior.\n\nProject maintainers have the right and responsibility to remove, edit, or\nreject comments, commits, code, wiki edits, issues, and other contributions\nthat are not aligned to this Code of Conduct, or to ban temporarily or\npermanently any contributor for other behaviors that they deem inappropriate,\nthreatening, offensive, or harmful.\n\n## Scope\n\nThis Code of Conduct applies both within project spaces and in public spaces\nwhen an individual is representing the project or its community. Examples of\nrepresenting a project or community include using an official project e-mail\naddress, posting via an official social media account, or acting as an appointed\nrepresentative at an online or offline event. Representation of a project may be\nfurther defined and clarified by project maintainers.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be\nreported by contacting the project team at piotrek.witek@gmail.com. All\ncomplaints will be reviewed and investigated and will result in a response that\nis deemed necessary and appropriate to the circumstances. The project team is\nobligated to maintain confidentiality with regard to the reporter of an incident.\nFurther details of specific enforcement policies may be posted separately.\n\nProject maintainers who do not follow or enforce the Code of Conduct in good\nfaith may face temporary or permanent repercussions as determined by other\nmembers of the project's leadership.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,\navailable at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html\n\n[homepage]: https://www.contributor-covenant.org\n\nFor answers to common questions about this code of conduct, see\nhttps://www.contributor-covenant.org/faq\n"
},
{
"path": "CONTRIBUTING.md",
"content": "# Contributing Guide\n\n## General\n1. Make sure you have read and understand the **Goals** section to be aligned with project goals.\n2. Before submitting a PR please comment in the relevant issue (or create a new one if it doesn't exist yet) to discuss all the requirements (this will prevent rejecting the PR and wasting your work).\n3. All workflow scripts (prettier, linter, tests) must pass successfully (it is run automatically on CI and will fail on github checks).\n\n## Edit `README_SOURCE.md` to generate an updated `README.md`\nDon't edit `README.md` directly - it is generated automatically from `README_SOURCE.md` using an automated script.\n - Use `sh ./generate-readme.sh` script to generate updated `README.md` (this will inject code examples using type-checked source files from the `/playground` folder)\n - So to make changes in code examples edit source files in `/playground` folder\n\n**Source code inject directives:**\n```\n# Inject code block with highlighter\n::codeblock='playground/src/components/fc-counter.tsx'::\n\n# Inject code block with highlighter and expander\n::expander='playground/src/components/fc-counter.usage.tsx'::\n```\n"
},
{
"path": "CONTRIBUTORS.md",
"content": "Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):\n\n\n\n| [ Piotrek Witek](https://github.com/piotrwitek) [💻](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=piotrwitek \"Code\") [📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=piotrwitek \"Documentation\") [🤔](#ideas-piotrwitek \"Ideas, Planning, & Feedback\") [👀](#review-piotrwitek \"Reviewed Pull Requests\") [💬](#question-piotrwitek \"Answering Questions\") | [ Kazz Yokomizo](https://github.com/kazup01) [💵](#financial-kazup01 \"Financial\") [🔍](#fundingFinding-kazup01 \"Funding Finding\") | [ Jake Boone](https://github.com/jakeboone02) [📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=jakeboone02 \"Documentation\") | [ Amit Dahan](https://github.com/amitdahan) [📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=amitdahan \"Documentation\") | [ gulderov](https://github.com/gulderov) [📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=gulderov \"Documentation\") | [ Erik Pearson](https://github.com/emp823) [📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=emp823 \"Documentation\") | [ Bryan Mason](https://github.com/flymason) [📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=flymason \"Documentation\") |\n| :---: | :---: | :---: | :---: | :---: | :---: | :---: |\n| [ Jakub Chodorowicz](http://www.jakub.chodorowicz.pl/) [💻](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=chodorowicz \"Code\") | [ Oleg Maslov](https://github.com/mleg) [🐛](https://github.com/piotrwitek/react-redux-typescript-guide/issues?q=author%3Amleg \"Bug reports\") | [ Aaron Westbrook](https://github.com/awestbro) [🐛](https://github.com/piotrwitek/react-redux-typescript-guide/issues?q=author%3Aawestbro \"Bug reports\") | [ Peter Blazejewicz](http://www.linkedin.com/in/peterblazejewicz) [📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=peterblazejewicz \"Documentation\") | [ Solomon White](https://github.com/rubysolo) [📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=rubysolo \"Documentation\") | [ Levi Rocha](https://github.com/pino) [📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=pino \"Documentation\") | [ Sudachi-kun](http://cloudnative.co.jp) [💵](#financial-loadbalance-sudachi-kun \"Financial\") |\n| [ Sosuke Suzuki](http://sosukesuzuki.github.io) [💻](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=sosukesuzuki \"Code\") | [ Tom Rathbone](https://github.com/chillitom) [📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=chillitom \"Documentation\") | [ Arshad Kazmi](https://arshadkazmi42.github.io/) [📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=arshadkazmi42 \"Documentation\") | [ JeongUkJae](https://jeongukjae.github.io) [📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=JeongUkJae \"Documentation\") |\n\n\nThis project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!\n"
},
{
"path": "LICENSE",
"content": "MIT License\n\nCopyright (c) 2016 Piotr Witek (http://piotrwitek.github.io)\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
},
{
"path": "README.md",
"content": "
\n\n# React & Redux in TypeScript - Complete Guide\n\n_\"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.\"_\n\n[](https://spectrum.chat/react-redux-ts)\n[](https://gitter.im/react-redux-typescript-guide/Lobby)\n\n_Found it useful? Want more updates?_\n\n[**Show your support by giving a :star:**](https://github.com/piotrwitek/react-redux-typescript-guide/stargazers)\n\n\n \n\n\n \n\n\n \n\n## **What's new?**\n\n:tada: _Now updated to support **TypeScript v4.6**_ :tada:\n:rocket: _Updated to `typesafe-actions@5.x` :rocket:\n\n \n\n
\n\n### **Goals**\n\n- 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)\n- Make type annotations concise by eliminating redundancy in types using advanced TypeScript Language features like **Type Inference** and **Control flow analysis**\n- Reduce repetition and complexity of types with TypeScript focused [complementary libraries](#react-redux-typescript-ecosystem)\n\n### **React, Redux, Typescript Ecosystem**\n\n- [typesafe-actions](https://github.com/piotrwitek/typesafe-actions) - Typesafe utilities for \"action-creators\" in Redux / Flux Architecture \n- [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. \n- [react-redux-typescript-scripts](https://github.com/piotrwitek/react-redux-typescript-scripts) - dev-tools configuration files shared between projects based on this guide \n\n### **Examples**\n\n- Todo-App playground: [Codesandbox](https://codesandbox.io/s/github/piotrwitek/typesafe-actions/tree/master/codesandbox)\n- React, Redux, TypeScript - RealWorld App: [Github](https://github.com/piotrwitek/react-redux-typescript-realworld-app) | [Demo](https://react-redux-typescript-realworld-app.netlify.com/)\n\n### **Playground Project**\n\n[](https://semaphoreci.com/piotrekwitek/react-redux-typescript-guide)\n\nCheck 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`).\n> 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.\n\n## Contributing Guide\n\nYou 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)\n\n## Funding\n\nYou can also help by funding issues.\nIssues like bug fixes or feature requests can be very quickly resolved when funded through the IssueHunt platform.\n\nI 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.\n\n[](https://issuehunt.io/repos/76996763)\n\n---\n\n🌟 - _New or updated section_\n\n## Table of Contents\n\n\n\n\n\n - [React Types Cheatsheet](#react-types-cheatsheet)\n - [`React.FC` | `React.FunctionComponent`](#reactfcprops--reactfunctioncomponentprops)\n - [`React.Component`](#reactcomponentprops-state)\n - [`React.ComponentType`](#reactcomponenttypeprops)\n - [`React.ComponentProps`](#reactcomponentpropstypeof-xxx)\n - [`React.ReactElement` | `JSX.Element`](#reactreactelement--jsxelement)\n - [`React.ReactNode`](#reactreactnode)\n - [`React.CSSProperties`](#reactcssproperties)\n - [`React.XXXHTMLAttributes`](#reactxxxhtmlattributeshtmlxxxelement)\n - [`React.ReactEventHandler`](#reactreacteventhandlerhtmlxxxelement)\n - [`React.XXXEvent`](#reactxxxeventhtmlxxxelement)\n- [React](#react)\n - [Function Components - FC](#function-components---fc)\n - [- Counter Component](#--counter-component)\n - [- Counter Component with default props](#--counter-component-with-default-props)\n - [- Spreading attributes in Component](#--spreading-attributes-in-component)\n - [Class Components](#class-components)\n - [- Class Counter Component](#--class-counter-component)\n - [- Class Component with default props](#--class-component-with-default-props)\n - [Generic Components](#generic-components)\n - [- Generic List Component](#--generic-list-component)\n - [Hooks](#hooks)\n - [- useState](#--usestate)\n - [- useContext](#--usecontext)\n - [- useReducer](#--usereducer)\n - [Render Props](#render-props)\n - [- Name Provider Component](#--name-provider-component)\n - [- Mouse Provider Component](#--mouse-provider-component)\n - [Higher-Order Components](#higher-order-components)\n - [- HOC wrapping a component](#--hoc-wrapping-a-component)\n - [- HOC wrapping a component and injecting props](#--hoc-wrapping-a-component-and-injecting-props)\n - [- Nested HOC - wrapping a component, injecting props and connecting to redux 🌟](#--nested-hoc---wrapping-a-component-injecting-props-and-connecting-to-redux-)\n - [Redux Connected Components](#redux-connected-components)\n - [- Redux connected counter](#--redux-connected-counter)\n - [- Redux connected counter with own props](#--redux-connected-counter-with-own-props)\n - [- Redux connected counter via hooks](#--redux-connected-counter-via-hooks)\n - [- Redux connected counter with `redux-thunk` integration](#--redux-connected-counter-with-redux-thunk-integration)\n - [Context](#context)\n - [ThemeContext](#themecontext)\n - [ThemeProvider](#themeprovider)\n - [ThemeConsumer](#themeconsumer)\n - [ThemeConsumer in class component](#themeconsumer-in-class-component)\n- [Redux](#redux)\n - [Store Configuration](#store-configuration)\n - [Create Global Store Types](#create-global-store-types)\n - [Create Store](#create-store)\n - [Action Creators 🌟](#action-creators-)\n - [Reducers](#reducers)\n - [State with Type-level Immutability](#state-with-type-level-immutability)\n - [Typing reducer](#typing-reducer)\n - [Typing reducer with `typesafe-actions`](#typing-reducer-with-typesafe-actions)\n - [Testing reducer](#testing-reducer)\n - [Async Flow with `redux-observable`](#async-flow-with-redux-observable)\n - [Typing epics](#typing-epics)\n - [Testing epics](#testing-epics)\n - [Selectors with `reselect`](#selectors-with-reselect)\n - [Connect with `react-redux`](#connect-with-react-redux)\n - [Typing connected component](#typing-connected-component)\n - [Typing `useSelector` and `useDispatch`](#typing-useselector-and-usedispatch)\n - [Typing connected component with `redux-thunk` integration](#typing-connected-component-with-redux-thunk-integration)\n- [Configuration & Dev Tools](#configuration--dev-tools)\n - [Common Npm Scripts](#common-npm-scripts)\n - [tsconfig.json](#tsconfigjson)\n - [TSLib](#tslib)\n - [ESLint](#eslint)\n - [.eslintrc.js](#eslintrcjs)\n - [Jest](#jest)\n - [jest.config.json](#jestconfigjson)\n - [jest.stubs.js](#jeststubsjs)\n - [Style Guides](#style-guides)\n - [react-styleguidist](#react-styleguidist)\n- [FAQ](#faq)\n - [Ambient Modules](#ambient-modules)\n - [Imports in ambient modules](#imports-in-ambient-modules)\n - [Type-Definitions](#type-definitions)\n - [Missing type-definitions error](#missing-type-definitions-error)\n - [Using custom `d.ts` files for npm modules](#using-custom-dts-files-for-npm-modules)\n - [Type Augmentation](#type-augmentation)\n - [Augmenting library internal declarations - using relative import](#augmenting-library-internal-declarations---using-relative-import)\n - [Augmenting library public declarations - using node_modules import](#augmenting-library-public-declarations---using-node_modules-import)\n - [Misc](#misc)\n - [- should I still use React.PropTypes in TS?](#--should-i-still-use-reactproptypes-in-ts)\n - [- when to use `interface` declarations and when `type` aliases?](#--when-to-use-interface-declarations-and-when-type-aliases)\n - [- what's better default or named exports?](#--whats-better-default-or-named-exports)\n - [- how to best initialize class instance or static properties?](#--how-to-best-initialize-class-instance-or-static-properties)\n - [- how to best declare component handler functions?](#--how-to-best-declare-component-handler-functions)\n- [Tutorials & Articles](#tutorials--articles)\n- [Contributors](#contributors)\n\n\n\n---\n\n# Installation\n\n## Types for React & Redux\n\n```\nnpm i -D @types/react @types/react-dom @types/react-redux\n```\n\n\"react\" - `@types/react` \n\"react-dom\" - `@types/react-dom` \n\"redux\" - (types included with npm package)* \n\"react-redux\" - `@types/react-redux` \n\n> *NB: Guide is based on types for Redux >= v4.x.x.\n\n[⇧ back to top](#table-of-contents)\n\n---\n\n## React Types Cheatsheet\n\n### `React.FC` | `React.FunctionComponent`\n\nType representing a functional component\n\n```tsx\nconst MyComponent: React.FC = ...\n```\n\n### `React.Component`\n\nType representing a class component\n\n```tsx\nclass MyComponent extends React.Component { ...\n```\n\n### `React.ComponentType`\n\nType representing union of (`React.FC | React.Component`) - used in HOC\n\n```tsx\nconst withState =
(\n WrappedComponent: React.ComponentType
,\n) => { ...\n```\n\n### `React.ComponentProps`\n\nGets Props type of a specified component XXX (WARNING: does not work with statically declared default props and generic props)\n\n```tsx\ntype MyComponentProps = React.ComponentProps;\n```\n\n### `React.ReactElement` | `JSX.Element`\n\nType representing a concept of React Element - representation of a native DOM component (e.g. ``), or a user-defined composite component (e.g. ``)\n\n```tsx\nconst elementOnly: React.ReactElement = || ;\n```\n\n### `React.ReactNode`\n\nType representing any possible type of React node (basically ReactElement (including Fragments and Portals) + primitive JS types)\n\n```tsx\nconst elementOrPrimitive: React.ReactNode = 'string' || 0 || false || null || undefined || || ;\nconst Component = ({ children: React.ReactNode }) => ...\n```\n\n### `React.CSSProperties`\n\nType representing style object in JSX - for css-in-js styles\n\n```tsx\nconst styles: React.CSSProperties = { flexDirection: 'row', ...\nconst element =
`\n\nType representing HTML attributes of specified HTML Element - for extending HTML Elements\n\n```tsx\nconst Input: React.FC> = props => { ... }\n\n\n```\n\n### `React.ReactEventHandler`\n\nType representing generic event handler - for declaring event handlers\n\n```tsx\nconst handleChange: React.ReactEventHandler = (ev) => { ... } \n\n\n```\n\n### `React.XXXEvent`\n\nType representing more specific event. Some common event examples: `ChangeEvent, FormEvent, FocusEvent, KeyboardEvent, MouseEvent, DragEvent, PointerEvent, WheelEvent, TouchEvent`.\n\n```tsx\nconst handleChange = (ev: React.MouseEvent) => { ... }\n\n\n```\n\nIn code above `React.MouseEvent` is type of mouse event, and this event happened on `HTMLDivElement`\n\n[⇧ back to top](#table-of-contents)\n\n---\n\n# React\n\n## Function Components - FC\n\n### - Counter Component\n\n```tsx\nimport * as React from 'react';\n\ntype Props = {\n label: string;\n count: number;\n onIncrement: () => void;\n};\n\nexport const FCCounter: React.FC = props => {\n const { label, count, onIncrement } = props;\n\n const handleIncrement = () => {\n onIncrement();\n };\n\n return (\n
\n \n {label}: {count}\n \n \n
\n );\n};\n\n```\n\n[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#fccounter)\n\n[⇧ back to top](#table-of-contents)\n\n### - Counter Component with default props\n\n```tsx\nimport * as React from 'react';\n\ntype Props = {\n label: string;\n count: number;\n onIncrement: () => void;\n};\n\n// React.FC is unaplicable here due not working properly with default props\n// https://github.com/facebook/create-react-app/pull/8177\nexport const FCCounterWithDefaultProps = (props: Props): JSX.Element => {\n const { label, count, onIncrement } = props;\n\n const handleIncrement = () => {\n onIncrement();\n };\n\n return (\n
\n \n {label}: {count}\n \n \n
\n );\n};\n\nFCCounterWithDefaultProps.defaultProps = { count: 5 };\n\n```\n\n[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#fccounterwithdefaultprops)\n\n[⇧ back to top](#table-of-contents)\n\n### - [Spreading attributes](https://facebook.github.io/react/docs/jsx-in-depth.html#spread-attributes) in Component\n\n```tsx\nimport * as React from 'react';\n\ntype Props = React.PropsWithChildren<{\n className?: string;\n style?: React.CSSProperties;\n}>;\n\nexport const FCSpreadAttributes: React.FC = (props) => {\n const { children, ...restProps } = props;\n\n return
{children}
;\n};\n\n```\n\n[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#fcspreadattributes)\n\n[⇧ back to top](#table-of-contents)\n\n---\n\n## Class Components\n\n### - Class Counter Component\n\n```tsx\nimport * as React from 'react';\n\ntype Props = {\n label: string;\n};\n\ntype State = {\n count: number;\n};\n\nexport class ClassCounter extends React.Component {\n readonly state: State = {\n count: 0,\n };\n\n handleIncrement = () => {\n this.setState({ count: this.state.count + 1 });\n };\n\n render() {\n const { handleIncrement } = this;\n const { label } = this.props;\n const { count } = this.state;\n\n return (\n
\n \n {label}: {count}\n \n \n
\n );\n }\n}\n\n```\n\n[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#classcounter)\n\n[⇧ back to top](#table-of-contents)\n\n### - Class Component with default props\n\n```tsx\nimport * as React from 'react';\n\ntype Props = {\n label: string;\n initialCount: number;\n};\n\ntype State = {\n count: number;\n};\n\nexport class ClassCounterWithDefaultProps extends React.Component<\n Props,\n State\n> {\n static defaultProps = {\n initialCount: 0,\n };\n\n readonly state: State = {\n count: this.props.initialCount,\n };\n\n handleIncrement = () => {\n this.setState({ count: this.state.count + 1 });\n };\n\n render() {\n const { handleIncrement } = this;\n const { label } = this.props;\n const { count } = this.state;\n\n return (\n
\n \n {label}: {count}\n \n \n
\n );\n }\n}\n\n```\n\n[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#classcounterwithdefaultprops)\n\n[⇧ back to top](#table-of-contents)\n\n---\n\n## Generic Components\n\n- easily create typed component variations and reuse common logic\n- common use case is a generic list components\n\n### - Generic List Component\n\n```tsx\nimport * as React from 'react';\n\nexport interface GenericListProps {\n items: T[];\n itemRenderer: (item: T) => JSX.Element;\n}\n\nexport class GenericList extends React.Component, {}> {\n render() {\n const { items, itemRenderer } = this.props;\n\n return (\n
\n {items.map(itemRenderer)}\n
\n );\n }\n}\n\n```\n\n[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#genericlist)\n\n[⇧ back to top](#table-of-contents)\n\n---\n\n## Hooks\n\n> \n\n### - useState\n\n> \n\n```tsx\nimport * as React from 'react';\n\ntype Props = { initialCount: number };\n\nexport default function Counter({initialCount}: Props) {\n const [count, setCount] = React.useState(initialCount);\n return (\n <>\n Count: {count}\n \n \n \n \n );\n}\n\n```\n\n[⇧ back to top](#table-of-contents)\n\n### - useContext\n\n> \n\n```tsx\nimport * as React from 'react';\nimport ThemeContext from '../context/theme-context';\n\ntype Props = {};\n\nexport default function ThemeToggleButton(props: Props) {\n const { theme, toggleTheme } = React.useContext(ThemeContext);\n return (\n \n );\n}\n\n```\n\n[⇧ back to top](#table-of-contents)\n\n### - useReducer\n\n> \n\n```tsx\nimport * as React from 'react';\n\ninterface State {\n count: number;\n}\n\ntype Action = { type: 'reset' } | { type: 'increment' } | { type: 'decrement' };\n\nfunction reducer(state: State, action: Action): State {\n switch (action.type) {\n case 'increment':\n return { count: state.count + 1 };\n case 'decrement':\n return { count: state.count - 1 };\n case 'reset':\n return { count: 0 };\n default:\n throw new Error();\n }\n}\n\ninterface CounterProps {\n initialCount: number;\n}\n\nfunction Counter({ initialCount }: CounterProps) {\n const [state, dispatch] = React.useReducer(reducer, {\n count: initialCount,\n });\n\n return (\n <>\n Count: {state.count}\n \n \n \n \n );\n}\n\nexport default Counter;\n\n```\n\n[⇧ back to top](#table-of-contents)\n\n---\n\n## Render Props\n\n> \n\n### - Name Provider Component\n\nSimple component using children as a render prop\n\n```tsx\nimport * as React from 'react';\n\ninterface NameProviderProps {\n children: (state: NameProviderState) => React.ReactNode;\n}\n\ninterface NameProviderState {\n readonly name: string;\n}\n\nexport class NameProvider extends React.Component {\n readonly state: NameProviderState = { name: 'Piotr' };\n\n render() {\n return this.props.children(this.state);\n }\n}\n\n```\n\n[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#nameprovider)\n\n[⇧ back to top](#table-of-contents)\n\n### - Mouse Provider Component\n\n`Mouse` component found in [Render Props React Docs](https://reactjs.org/docs/render-props.html#use-render-props-for-cross-cutting-concerns)\n\n```tsx\nimport * as React from 'react';\n\nexport interface MouseProviderProps {\n render: (state: MouseProviderState) => React.ReactNode;\n}\n\ninterface MouseProviderState {\n readonly x: number;\n readonly y: number;\n}\n\nexport class MouseProvider extends React.Component {\n readonly state: MouseProviderState = { x: 0, y: 0 };\n\n handleMouseMove = (event: React.MouseEvent) => {\n this.setState({\n x: event.clientX,\n y: event.clientY,\n });\n };\n\n render() {\n return (\n
\n {/*\n Instead of providing a static representation of what renders,\n use the `render` prop to dynamically determine what to render.\n */}\n {this.props.render(this.state)}\n
\n );\n }\n}\n\n```\n\n[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#mouseprovider)\n\n[⇧ back to top](#table-of-contents)\n\n---\n\n## Higher-Order Components\n\n> \n\n### - HOC wrapping a component\n\nAdds state to a stateless counter\n\n```tsx\nimport React from 'react';\nimport { Diff } from 'utility-types';\n\n// These props will be injected into the base component\ninterface InjectedProps {\n count: number;\n onIncrement: () => void;\n}\n\nexport const withState = (\n BaseComponent: React.ComponentType\n) => {\n type HocProps = Diff & {\n // here you can extend hoc with new props\n initialCount?: number;\n };\n type HocState = {\n readonly count: number;\n };\n\n return class Hoc extends React.Component {\n // Enhance component name for debugging and React-Dev-Tools\n static displayName = `withState(${BaseComponent.name})`;\n // reference to original wrapped component\n static readonly WrappedComponent = BaseComponent;\n\n readonly state: HocState = {\n count: Number(this.props.initialCount) || 0,\n };\n\n handleIncrement = () => {\n this.setState({ count: this.state.count + 1 });\n };\n\n render() {\n const { ...restProps } = this.props;\n const { count } = this.state;\n\n return (\n \n );\n }\n };\n};\n\n```\nClick to expand
\n\n```tsx\nimport * as React from 'react';\n\nimport { withState } from '../hoc';\nimport { FCCounter } from '../components';\n\nconst FCCounterWithState = withState(FCCounter);\n\nexport default () => ;\n\n```\n
\n\n[⇧ back to top](#table-of-contents)\n\n### - HOC wrapping a component and injecting props\n\nAdds error handling using componentDidCatch to any component\n\n```tsx\nimport React from 'react';\n\nconst MISSING_ERROR = 'Error was swallowed during propagation.';\n\nexport const withErrorBoundary = (\n BaseComponent: React.ComponentType\n) => {\n type HocProps = React.PropsWithChildren<{\n // here you can extend hoc with new props\n }>;\n type HocState = {\n readonly error: Error | null | undefined;\n };\n\n return class Hoc extends React.Component {\n // Enhance component name for debugging and React-Dev-Tools\n static displayName = `withErrorBoundary(${BaseComponent.name})`;\n // reference to original wrapped component\n static readonly WrappedComponent = BaseComponent;\n\n readonly state: HocState = {\n error: undefined,\n };\n\n componentDidCatch(error: Error | null, info: object) {\n this.setState({ error: error || new Error(MISSING_ERROR) });\n this.logErrorToCloud(error, info);\n }\n\n logErrorToCloud = (error: Error | null, info: object) => {\n // TODO: send error report to service provider\n };\n\n render() {\n const { children, ...restProps } = this.props;\n const { error } = this.state;\n\n if (error) {\n return ;\n }\n\n return children;\n }\n };\n};\n\n```\nClick to expand
\n\n[⇧ back to top](#table-of-contents)\n\n### - Nested HOC - wrapping a component, injecting props and connecting to redux 🌟\n\nAdds error handling using componentDidCatch to any component\n\n```tsx\nimport { RootState } from 'MyTypes';\nimport React from 'react';\nimport { connect } from 'react-redux';\nimport { Diff } from 'utility-types';\nimport { countersActions, countersSelectors } from '../features/counters';\n\n// These props will be injected into the base component\ninterface InjectedProps {\n count: number;\n onIncrement: () => void;\n}\n\nexport const withConnectedCount = (\n BaseComponent: React.ComponentType\n) => {\n const mapStateToProps = (state: RootState) => ({\n count: countersSelectors.getReduxCounter(state.counters),\n });\n\n const dispatchProps = {\n onIncrement: countersActions.increment,\n };\n\n type HocProps = ReturnType &\n typeof dispatchProps & {\n // here you can extend ConnectedHoc with new props\n overrideCount?: number;\n };\n\n class Hoc extends React.Component {\n // Enhance component name for debugging and React-Dev-Tools\n static displayName = `withConnectedCount(${BaseComponent.name})`;\n // reference to original wrapped component\n static readonly WrappedComponent = BaseComponent;\n\n render() {\n const { count, onIncrement, overrideCount, ...restProps } = this.props;\n\n return (\n \n );\n }\n }\n\n const ConnectedHoc = connect<\n ReturnType,\n typeof dispatchProps, // use \"undefined\" if NOT using dispatchProps\n Diff,\n RootState\n >(\n mapStateToProps,\n dispatchProps\n )(Hoc);\n\n return ConnectedHoc;\n};\n\n```\nClick to expand
\n\n```tsx\nimport * as React from 'react';\n\nimport { withConnectedCount } from '../hoc';\nimport { FCCounter } from '../components';\n\nconst FCCounterWithConnectedCount = withConnectedCount(FCCounter);\n\nexport default () => (\n \n);\n\n```\n
\n\n[⇧ back to top](#table-of-contents)\n\n---\n\n## Redux Connected Components\n\n### - Redux connected counter\n\n```tsx\nimport Types from 'MyTypes';\nimport { connect } from 'react-redux';\n\nimport { countersActions, countersSelectors } from '../features/counters';\nimport { FCCounter } from '../components';\n\nconst mapStateToProps = (state: Types.RootState) => ({\n count: countersSelectors.getReduxCounter(state.counters),\n});\n\nconst dispatchProps = {\n onIncrement: countersActions.increment,\n};\n\nexport const FCCounterConnected = connect(\n mapStateToProps,\n dispatchProps\n)(FCCounter);\n\n```\nClick to expand
\n\n```tsx\nimport * as React from 'react';\n\nimport { FCCounterConnected } from '.';\n\nexport default () => ;\n\n```\n
\n\n[⇧ back to top](#table-of-contents)\n\n### - Redux connected counter with own props\n\n```tsx\nimport Types from 'MyTypes';\nimport { connect } from 'react-redux';\n\nimport { countersActions, countersSelectors } from '../features/counters';\nimport { FCCounter } from '../components';\n\ntype OwnProps = {\n initialCount?: number;\n};\n\nconst mapStateToProps = (state: Types.RootState, ownProps: OwnProps) => ({\n count:\n countersSelectors.getReduxCounter(state.counters) +\n (ownProps.initialCount || 0),\n});\n\nconst dispatchProps = {\n onIncrement: countersActions.increment,\n};\n\nexport const FCCounterConnectedOwnProps = connect(\n mapStateToProps,\n dispatchProps\n)(FCCounter);\n\n```\nClick to expand
\n\n```tsx\nimport * as React from 'react';\n\nimport { FCCounterConnectedOwnProps } from '.';\n\nexport default () => (\n \n);\n\n```\n
\n\n[⇧ back to top](#table-of-contents)\n\n### - Redux connected counter via hooks\n\n```tsx\nimport * as React from 'react';\nimport { FCCounter } from '../components';\nimport { increment } from '../features/counters/actions';\nimport { useSelector, useDispatch } from '../store/hooks';\n\nconst FCCounterConnectedHooksUsage: React.FC = () => {\n const counter = useSelector(state => state.counters.reduxCounter);\n const dispatch = useDispatch();\n return dispatch(increment())}/>;\n};\n\nexport default FCCounterConnectedHooksUsage;\n\n```\n\n[⇧ back to top](#table-of-contents)\n\n### - Redux connected counter with `redux-thunk` integration\n\n```tsx\nimport Types from 'MyTypes';\nimport { bindActionCreators, Dispatch } from 'redux';\nimport { connect } from 'react-redux';\nimport * as React from 'react';\n\nimport { countersActions } from '../features/counters';\n\n// Thunk Action\nconst incrementWithDelay = () => async (dispatch: Dispatch): Promise => {\n setTimeout(() => dispatch(countersActions.increment()), 1000);\n};\n\nconst mapStateToProps = (state: Types.RootState) => ({\n count: state.counters.reduxCounter,\n});\n\nconst mapDispatchToProps = (dispatch: Dispatch) =>\n bindActionCreators(\n {\n onIncrement: incrementWithDelay,\n },\n dispatch\n );\n\ntype Props = ReturnType &\n ReturnType & {\n label: string;\n };\n\nexport const FCCounter: React.FC = props => {\n const { label, count, onIncrement } = props;\n\n const handleIncrement = () => {\n // Thunk action is correctly typed as promise\n onIncrement().then(() => {\n // ...\n });\n };\n\n return (\n
\n \n {label}: {count}\n \n \n
\n );\n};\n\nexport const FCCounterConnectedBindActionCreators = connect(\n mapStateToProps,\n mapDispatchToProps\n)(FCCounter);\n\n```\nClick to expand
\n\n```tsx\nimport * as React from 'react';\n\nimport { FCCounterConnectedBindActionCreators } from '.';\n\nexport default () => (\n \n);\n\n```\n
\n\n[⇧ back to top](#table-of-contents)\n\n## Context\n\n> \n\n### ThemeContext\n\n```tsx\nimport * as React from 'react';\n\nexport type Theme = React.CSSProperties;\n\ntype Themes = {\n dark: Theme;\n light: Theme;\n};\n\nexport const themes: Themes = {\n dark: {\n color: 'black',\n backgroundColor: 'white',\n },\n light: {\n color: 'white',\n backgroundColor: 'black',\n },\n};\n\nexport type ThemeContextProps = { theme: Theme; toggleTheme?: () => void };\nconst ThemeContext = React.createContext({ theme: themes.light });\n\nexport default ThemeContext;\n\n```\n\n[⇧ back to top](#table-of-contents)\n\n### ThemeProvider\n\n```tsx\nimport React from 'react';\nimport ThemeContext, { themes, Theme } from './theme-context';\nimport ToggleThemeButton from './theme-consumer';\n\ninterface State {\n theme: Theme;\n}\nexport class ThemeProvider extends React.Component<{}, State> {\n readonly state: State = { theme: themes.light };\n\n toggleTheme = () => {\n this.setState(state => ({\n theme: state.theme === themes.light ? themes.dark : themes.light,\n }));\n }\n\n render() {\n const { theme } = this.state;\n const { toggleTheme } = this;\n return (\n \n \n \n );\n }\n}\n\n```\n\n[⇧ back to top](#table-of-contents)\n\n### ThemeConsumer\n\n```tsx\nimport * as React from 'react';\nimport ThemeContext from './theme-context';\n\ntype Props = {};\n\nexport default function ToggleThemeButton(props: Props) {\n return (\n \n {({ theme, toggleTheme }) => }\n \n );\n}\n\n```\n\n### ThemeConsumer in class component\n\n```tsx\nimport * as React from 'react';\nimport ThemeContext from './theme-context';\n\ntype Props = {};\n\nexport class ToggleThemeButtonClass extends React.Component {\n static contextType = ThemeContext;\n declare context: React.ContextType;\n\n render() {\n const { theme, toggleTheme } = this.context;\n return (\n \n );\n }\n}\n\n```\n\n[Implementation with Hooks](#--usecontext)\n\n[⇧ back to top](#table-of-contents)\n\n\n---\n\n# Redux\n\n## Store Configuration\n\n### Create Global Store Types\n\n#### `RootState` - type representing root state-tree\n\nCan be imported in connected components to provide type-safety to Redux `connect` function\n\n#### `RootAction` - type representing union type of all action objects\n\nCan be imported in various layers receiving or sending redux actions like: reducers, sagas or redux-observables epics\n\n```tsx\nimport { StateType, ActionType } from 'typesafe-actions';\n\ndeclare module 'MyTypes' {\n export type Store = StateType;\n export type RootAction = ActionType;\n export type RootState = StateType>;\n}\n\ndeclare module 'typesafe-actions' {\n interface Types {\n RootAction: ActionType;\n }\n}\n\n```\n\n[⇧ back to top](#table-of-contents)\n\n### Create Store\n\nWhen creating a store instance we don't need to provide any additional types. It will set-up a **type-safe Store instance** using type inference.\n> The resulting store instance methods like `getState` or `dispatch` will be type checked and will expose all type errors\n\n```tsx\nimport { RootAction, RootState, Services } from 'MyTypes';\nimport { applyMiddleware, createStore } from 'redux';\nimport { createEpicMiddleware } from 'redux-observable';\n\nimport services from '../services';\nimport { routerMiddleware } from './redux-router';\nimport rootEpic from './root-epic';\nimport rootReducer from './root-reducer';\nimport { composeEnhancers } from './utils';\n\nconst epicMiddleware = createEpicMiddleware<\n RootAction,\n RootAction,\n RootState,\n Services\n>({\n dependencies: services,\n});\n\n// configure middlewares\nconst middlewares = [epicMiddleware, routerMiddleware];\n// compose enhancers\nconst enhancer = composeEnhancers(applyMiddleware(...middlewares));\n\n// rehydrate state on app start\nconst initialState = {};\n\n// create store\nconst store = createStore(\n rootReducer,\n initialState,\n enhancer\n);\n\nepicMiddleware.run(rootEpic);\n\n// export store singleton instance\nexport default store;\n\n```\n\n---\n\n## Action Creators 🌟\n\n> We'll be using a battle-tested helper library [`typesafe-actions`](https://github.com/piotrwitek/typesafe-actions#typesafe-actions) [](https://www.npmjs.com/package/typesafe-actions) [](https://www.npmjs.com/package/typesafe-actions) that's designed to make it easy and fun working with **Redux** in **TypeScript**.\n\n> To learn more please check this in-depth tutorial: [Typesafe-Actions - Tutorial](https://github.com/piotrwitek/typesafe-actions#tutorial)!\n\nA solution below is using a simple factory function to automate the creation of type-safe action creators. The goal is to decrease maintenance effort and reduce code repetition of type annotations for actions and creators. The result is completely typesafe action-creators and their actions.\n\n```tsx\n/* eslint-disable */\nimport { action } from 'typesafe-actions';\n\nimport { ADD, INCREMENT } from './constants';\n\n/* SIMPLE API */\n\nexport const increment = () => action(INCREMENT);\nexport const add = (amount: number) => action(ADD, amount);\n\n/* ADVANCED API */\n\n// More flexible allowing to create complex actions more easily\n// use can use \"action-creator\" instance in place of \"type constant\"\n// e.g. case getType(increment): return action.payload;\n// This will allow to completely eliminate need for \"constants\" in your application, more info here:\n// https://github.com/piotrwitek/typesafe-actions#constants\n\nimport { createAction } from 'typesafe-actions';\nimport { Todo } from '../todos/models';\n\nexport const emptyAction = createAction(INCREMENT)();\nexport const payloadAction = createAction(ADD)();\nexport const payloadMetaAction = createAction(ADD)();\n\nexport const payloadCreatorAction = createAction(\n 'TOGGLE_TODO',\n (todo: Todo) => todo.id\n)();\n\n```\nClick to expand
\n\n```tsx\nimport { store } from '../../store/';\nimport { countersActions as counter } from '../counters';\n\n// store.dispatch(counter.increment(1)); // Error: Expected 0 arguments, but got 1.\nstore.dispatch(counter.increment()); // OK\n\n// store.dispatch(counter.add()); // Error: Expected 1 arguments, but got 0.\nstore.dispatch(counter.add(1)); // OK\n\n```\n
\n\n[⇧ back to top](#table-of-contents)\n\n---\n\n## Reducers\n\n### State with Type-level Immutability\n\nDeclare reducer `State` type with `readonly` modifier to get compile time immutability\n\n```ts\nexport type State = {\n readonly counter: number;\n readonly todos: ReadonlyArray;\n};\n```\n\nReadonly modifier allow initialization, but will not allow reassignment by highlighting compiler errors\n\n```ts\nexport const initialState: State = {\n counter: 0,\n}; // OK\n\ninitialState.counter = 3; // TS Error: cannot be mutated\n```\n\nIt's great for **Arrays in JS** because it will error when using mutator methods like (`push`, `pop`, `splice`, ...), but it'll still allow immutable methods like (`concat`, `map`, `slice`,...).\n\n```ts\nstate.todos.push('Learn about tagged union types') // TS Error: Property 'push' does not exist on type 'ReadonlyArray'\nconst newTodos = state.todos.concat('Learn about tagged union types') // OK\n```\n\n#### Caveat - `Readonly` is not recursive\n\nThis means that the `readonly` modifier doesn't propagate immutability down the nested structure of objects. You'll need to mark each property on each level explicitly.\n\n> **TIP:** use `Readonly` or `ReadonlyArray` [Mapped types](https://www.typescriptlang.org/docs/handbook/advanced-types.html)\n\n```ts\nexport type State = Readonly<{\n counterPairs: ReadonlyArray>,\n}>;\n\nstate.counterPairs[0] = { immutableCounter1: 1, immutableCounter2: 1 }; // TS Error: cannot be mutated\nstate.counterPairs[0].immutableCounter1 = 1; // TS Error: cannot be mutated\nstate.counterPairs[0].immutableCounter2 = 1; // TS Error: cannot be mutated\n```\n\n#### Solution - recursive `Readonly` is called `DeepReadonly`\n\nTo fix this we can use [`DeepReadonly`](https://github.com/piotrwitek/utility-types#deepreadonlyt) type (available from `utility-types`).\n\n```ts\nimport { DeepReadonly } from 'utility-types';\n\nexport type State = DeepReadonly<{\n containerObject: {\n innerValue: number,\n numbers: number[],\n }\n}>;\n\nstate.containerObject = { innerValue: 1 }; // TS Error: cannot be mutated\nstate.containerObject.innerValue = 1; // TS Error: cannot be mutated\nstate.containerObject.numbers.push(1); // TS Error: cannot use mutator methods\n```\n\n[⇧ back to top](#table-of-contents)\n\n### Typing reducer\n\n> to understand following section make sure to learn about [Type Inference](https://www.typescriptlang.org/docs/handbook/type-inference.html), [Control flow analysis](https://github.com/Microsoft/TypeScript/wiki/What%27s-new-in-TypeScript#control-flow-based-type-analysis) and [Tagged union types](https://github.com/Microsoft/TypeScript/wiki/What%27s-new-in-TypeScript#tagged-union-types)\n\n```tsx\nimport { combineReducers } from 'redux';\nimport { ActionType } from 'typesafe-actions';\n\nimport { Todo, TodosFilter } from './models';\nimport * as actions from './actions';\nimport { ADD, CHANGE_FILTER, TOGGLE } from './constants';\n\nexport type TodosAction = ActionType;\n\nexport type TodosState = Readonly<{\n todos: Todo[];\n todosFilter: TodosFilter;\n}>;\nconst initialState: TodosState = {\n todos: [],\n todosFilter: TodosFilter.All,\n};\n\nexport default combineReducers({\n todos: (state = initialState.todos, action) => {\n switch (action.type) {\n case ADD:\n return [...state, action.payload];\n\n case TOGGLE:\n return state.map(item =>\n item.id === action.payload\n ? { ...item, completed: !item.completed }\n : item\n );\n\n default:\n return state;\n }\n },\n todosFilter: (state = initialState.todosFilter, action) => {\n switch (action.type) {\n case CHANGE_FILTER:\n return action.payload;\n\n default:\n return state;\n }\n },\n});\n\n```\n\n[⇧ back to top](#table-of-contents)\n\n### Typing reducer with `typesafe-actions`\n\n> Notice we are not required to use any generic type parameter in the API. Try to compare it with regular reducer as they are equivalent.\n\n```tsx\nimport { combineReducers } from 'redux';\nimport { createReducer } from 'typesafe-actions';\n\nimport { Todo, TodosFilter } from './models';\nimport { ADD, CHANGE_FILTER, TOGGLE } from './constants';\n\nexport type TodosState = Readonly<{\n todos: Todo[];\n todosFilter: TodosFilter;\n}>;\nconst initialState: TodosState = {\n todos: [],\n todosFilter: TodosFilter.All,\n};\n\nconst todos = createReducer(initialState.todos)\n .handleType(ADD, (state, action) => [...state, action.payload])\n .handleType(TOGGLE, (state, action) =>\n state.map(item =>\n item.id === action.payload\n ? { ...item, completed: !item.completed }\n : item\n )\n );\n\nconst todosFilter = createReducer(initialState.todosFilter).handleType(\n CHANGE_FILTER,\n (state, action) => action.payload\n);\n\nexport default combineReducers({\n todos,\n todosFilter,\n});\n\n```\n\n[⇧ back to top](#table-of-contents)\n\n### Testing reducer\n\n```tsx\nimport {\n todosReducer as reducer,\n todosActions as actions,\n} from './';\nimport { TodosState } from './reducer';\n\n/**\n * FIXTURES\n */\nconst getInitialState = (initial?: Partial) =>\n reducer(initial as TodosState, {} as any);\n\n/**\n * STORIES\n */\ndescribe('Todos Stories', () => {\n describe('initial state', () => {\n it('should match a snapshot', () => {\n const initialState = getInitialState();\n expect(initialState).toMatchSnapshot();\n });\n });\n\n describe('adding todos', () => {\n it('should add a new todo as the first element', () => {\n const initialState = getInitialState();\n expect(initialState.todos).toHaveLength(0);\n const state = reducer(initialState, actions.add('new todo'));\n expect(state.todos).toHaveLength(1);\n expect(state.todos[0].title).toEqual('new todo');\n });\n });\n\n describe('toggling completion state', () => {\n it('should mark active todo as complete', () => {\n const activeTodo = { id: '1', completed: false, title: 'active todo' };\n const initialState = getInitialState({ todos: [activeTodo] });\n expect(initialState.todos[0].completed).toBeFalsy();\n const state1 = reducer(initialState, actions.toggle(activeTodo.id));\n expect(state1.todos[0].completed).toBeTruthy();\n });\n });\n});\n\n```\n\n[⇧ back to top](#table-of-contents)\n\n---\n\n## Async Flow with `redux-observable`\n\n### Typing epics\n\n```tsx\nimport { RootAction, RootState, Services } from 'MyTypes';\nimport { Epic } from 'redux-observable';\nimport { tap, ignoreElements, filter } from 'rxjs/operators';\nimport { isOfType } from 'typesafe-actions';\n\nimport { todosConstants } from '../todos';\n\n// contrived example!!!\nexport const logAddAction: Epic = (\n action$,\n state$,\n { logger }\n) =>\n action$.pipe(\n filter(isOfType(todosConstants.ADD)), // action is narrowed to: { type: \"ADD_TODO\"; payload: string; }\n tap(action => {\n logger.log(\n `action type must be equal: ${todosConstants.ADD} === ${action.type}`\n );\n }),\n ignoreElements()\n );\n\n```\n\n[⇧ back to top](#table-of-contents)\n\n### Testing epics\n\n```tsx\nimport { StateObservable, ActionsObservable } from 'redux-observable';\nimport { RootState, RootAction } from 'MyTypes';\nimport { Subject } from 'rxjs';\n\nimport { add } from './actions';\nimport { logAddAction } from './epics';\n\n// Simple typesafe mock of all the services, you dont't need to mock anything else\n// It is decoupled and reusable for all your tests, just put it in a separate file\nconst services = {\n logger: {\n log: jest.fn(),\n },\n localStorage: {\n loadState: jest.fn(),\n saveState: jest.fn(),\n },\n};\n\ndescribe('Todos Epics', () => {\n let state$: StateObservable;\n\n beforeEach(() => {\n state$ = new StateObservable(\n new Subject(),\n undefined as any\n );\n });\n\n describe('logging todos actions', () => {\n beforeEach(() => {\n services.logger.log.mockClear();\n });\n\n it('should call the logger service when adding a new todo', done => {\n const addTodoAction = add('new todo');\n const action$ = ActionsObservable.of(addTodoAction);\n\n logAddAction(action$, state$, services)\n .toPromise()\n .then((outputAction: RootAction) => {\n expect(services.logger.log).toHaveBeenCalledTimes(1);\n expect(services.logger.log).toHaveBeenCalledWith(\n 'action type must be equal: todos/ADD === todos/ADD'\n );\n // expect output undefined because we're using \"ignoreElements\" in epic\n expect(outputAction).toEqual(undefined);\n done();\n });\n });\n });\n});\n\n```\n\n[⇧ back to top](#table-of-contents)\n\n---\n\n## Selectors with `reselect`\n\n```tsx\nimport { createSelector } from 'reselect';\n\nimport { TodosState } from './reducer';\n\nexport const getTodos = (state: TodosState) => state.todos;\n\nexport const getTodosFilter = (state: TodosState) => state.todosFilter;\n\nexport const getFilteredTodos = createSelector(getTodos, getTodosFilter, (todos, todosFilter) => {\n switch (todosFilter) {\n case 'completed':\n return todos.filter(t => t.completed);\n case 'active':\n return todos.filter(t => !t.completed);\n\n default:\n return todos;\n }\n});\n\n```\n\n[⇧ back to top](#table-of-contents)\n\n---\n\n## Connect with `react-redux`\n\n### Typing connected component\n\n_**NOTE**: Below you'll find a short explanation of concepts behind using `connect` with TypeScript. For more detailed examples please check [Redux Connected Components](#redux-connected-components) section._\n\n```tsx\nimport MyTypes from 'MyTypes';\n\nimport { bindActionCreators, Dispatch, ActionCreatorsMapObject } from 'redux';\nimport { connect } from 'react-redux';\n\nimport { countersActions } from '../features/counters';\nimport { FCCounter } from '../components';\n\n// Type annotation for \"state\" argument is mandatory to check \n// the correct shape of state object and injected props you can also\n// extend connected component Props interface by annotating `ownProps` argument\nconst mapStateToProps = (state: MyTypes.RootState, ownProps: FCCounterProps) => ({\n count: state.counters.reduxCounter,\n});\n\n// \"dispatch\" argument needs an annotation to check the correct shape\n// of an action object when using dispatch function\nconst mapDispatchToProps = (dispatch: Dispatch) =>\n bindActionCreators({\n onIncrement: countersActions.increment,\n }, dispatch);\n\n// shorter alternative is to use an object instead of mapDispatchToProps function\nconst dispatchToProps = {\n onIncrement: countersActions.increment,\n};\n\n// Notice we don't need to pass any generic type parameters to neither\n// the connect function below nor map functions declared above\n// because type inference will infer types from arguments annotations automatically\n// This is much cleaner and idiomatic approach\nexport const FCCounterConnected =\n connect(mapStateToProps, mapDispatchToProps)(FCCounter);\n\n// You can add extra layer of validation of your action creators\n// by using bindActionCreators generic type parameter and RootAction type\nconst mapDispatchToProps = (dispatch: Dispatch) =>\n bindActionCreators>({\n invalidActionCreator: () => 1, // Error: Type 'number' is not assignable to type '{ type: \"todos/ADD\"; payload: Todo; } | { ... }\n }, dispatch);\n\n```\n\n[⇧ back to top](#table-of-contents)\n\n### Typing `useSelector` and `useDispatch`\n\n```tsx\nimport { Dispatch } from 'redux';\nimport {\n TypedUseSelectorHook,\n useSelector as useGenericSelector,\n useDispatch as useGenericDispatch\n} from 'react-redux';\nimport { RootState, RootAction } from 'MyTypes';\n\nexport const useSelector: TypedUseSelectorHook = useGenericSelector;\n\nexport const useDispatch: () => Dispatch = useGenericDispatch;\n\n```\n\n[⇧ back to top](#table-of-contents)\n\n### Typing connected component with `redux-thunk` integration\n\n_**NOTE**: When using thunk action creators you need to use `bindActionCreators`. Only this way you can get corrected dispatch props type signature like below.*_\n\n_**WARNING**: As of now (Apr 2019) `bindActionCreators` signature of the latest `redux-thunk` release will not work as below, you need to use our modified type definitions that you can find here [`/playground/typings/redux-thunk/index.d.ts`](./playground/typings/redux-thunk/index.d.ts) and then add `paths` overload in your tsconfig like this: [`\"paths\":{\"redux-thunk\":[\"typings/redux-thunk\"]}`](./playground/tsconfig.json)._\n\n```tsx\nconst thunkAsyncAction = () => async (dispatch: Dispatch): Promise => {\n // dispatch actions, return Promise, etc.\n}\n\nconst mapDispatchToProps = (dispatch: Dispatch) =>\n bindActionCreators(\n {\n thunkAsyncAction,\n },\n dispatch\n );\n\ntype DispatchProps = ReturnType;\n// { thunkAsyncAction: () => Promise; }\n\n/* Without \"bindActionCreators\" fix signature will be the same as the original \"unbound\" thunk function: */\n// { thunkAsyncAction: () => (dispatch: Dispatch) => Promise; }\n```\n\n[⇧ back to top](#table-of-contents)\n\n---\n\n# Configuration & Dev Tools\n\n## Common Npm Scripts\n\n> Common TS-related npm scripts shared across projects\n\n```json\n\"prettier\": \"prettier --list-different 'src/**/*.ts' || (echo '\\nPlease fix code formatting by running:\\nnpm run prettier:fix\\n'; exit 1)\",\n\"prettier:fix\": \"prettier --write 'src/**/*.ts'\",\n\"lint\": \"eslint ./src --ext .js,.jsx,.ts,.tsx\",\n\"tsc\": \"tsc -p ./ --noEmit\",\n\"tsc:watch\": \"tsc -p ./ --noEmit -w\",\n\"test\": \"jest --config jest.config.json\",\n\"test:watch\": \"jest --config jest.config.json --watch\",\n\"test:update\": \"jest --config jest.config.json -u\"\n\"ci-check\": \"npm run prettier && npm run lint && npm run tsc && npm run test\",\n```\n\n[⇧ back to top](#table-of-contents)\n\n## tsconfig.json\n\nWe have recommended `tsconfig.json` that you can easily add to your project thanks to [`react-redux-typescript-scripts`](https://github.com/piotrwitek/react-redux-typescript-scripts) package.\n\nClick to expand
\n\n[⇧ back to top](#table-of-contents)\n\n## TSLib\n\nThis library will cut down on your bundle size, thanks to using external runtime helpers instead of adding them per each file.\n\n> \n\n> Installation \n`npm i tslib`\n\n\nThen add this to your `tsconfig.json`:\n\n```ts\n\"compilerOptions\": {\n \"importHelpers\": true\n}\n```\n\n[⇧ back to top](#table-of-contents)\n\n## ESLint\n\nWe 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.\n\n> \n\n> Installation\n`npm i -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin`\n\n\n### .eslintrc.js\n\nClick to expand
\n\n[⇧ back to top](#table-of-contents)\n\n## Jest\n\n> \n\n> Installation \n`npm i -D jest ts-jest @types/jest`\n\n### jest.config.json\n\nClick to expand
\n\n```tsx\n// Global/Window object Stubs for Jest\nwindow.matchMedia = window.matchMedia || function () {\n return {\n matches: false,\n addListener: function () { },\n removeListener: function () { },\n };\n};\n\nwindow.requestAnimationFrame = function (callback) {\n setTimeout(callback);\n};\n\nwindow.localStorage = {\n getItem: function () { },\n setItem: function () { },\n};\n\nObject.values = () => [];\n\n```\n
\n\n[⇧ back to top](#table-of-contents)\n\n## Style Guides\n\n### [react-styleguidist](https://github.com/styleguidist/react-styleguidist)\n\n[⟩⟩⟩ styleguide.config.js](/playground/styleguide.config.js) \n\n[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/)\n\n[⇧ back to top](#table-of-contents)\n\n---\n\n# FAQ\n\n\n## Ambient Modules\n\n### Imports in ambient modules\n\nFor type augmentation imports should stay outside of module declaration.\n\n```ts\nimport { Operator } from 'rxjs/Operator';\nimport { Observable } from 'rxjs/Observable';\n\ndeclare module 'rxjs/Subject' {\n interface Subject {\n lift(operator: Operator): Observable;\n }\n}\n```\n\nWhen creating 3rd party type-definitions all the imports should be kept inside the module declaration, otherwise it will be treated as augmentation and show error\n\n```ts\ndeclare module \"react-custom-scrollbars\" {\n import * as React from \"react\";\n export interface positionValues {\n ...\n```\n\n[⇧ back to top](#table-of-contents)\n\n## Type-Definitions\n\n### Missing type-definitions error\n\nif you cannot find types for a third-party module you can provide your own types or disable type-checking for this module using [Shorthand Ambient Modules](https://github.com/Microsoft/TypeScript-Handbook/blob/master/pages/Modules.md#shorthand-ambient-modules)\n\n```tsx\n// typings/modules.d.ts\ndeclare module 'MyTypes';\ndeclare module 'react-test-renderer';\ndeclare module '@storybook/addon-storyshots'\n\n```\n\n### Using custom `d.ts` files for npm modules\n\nIf you want to use an alternative (customized) type-definitions for some npm module (that usually comes with it's own type-definitions), you can do it by adding an override in `paths` compiler option.\n\n```ts\n{\n \"compilerOptions\": {\n \"baseUrl\": \".\",\n \"paths\": {\n \"redux\": [\"typings/redux\"], // use an alternative type-definitions instead of the included one\n ...\n },\n ...,\n }\n}\n```\n\n[⇧ back to top](#table-of-contents)\n\n## Type Augmentation\n\nStrategies to fix issues coming from external type-definitions files (*.d.ts)\n\n### Augmenting library internal declarations - using relative import\n\n```ts\n// added missing autoFocus Prop on Input component in \"antd@2.10.0\" npm package\ndeclare module '../node_modules/antd/lib/input/Input' {\n export interface InputProps {\n autoFocus?: boolean;\n }\n}\n```\n\n### Augmenting library public declarations - using node_modules import\n\n```ts\n// fixed broken public type-definitions in \"rxjs@5.4.1\" npm package\nimport { Operator } from 'rxjs/Operator';\nimport { Observable } from 'rxjs/Observable';\n\ndeclare module 'rxjs/Subject' {\n interface Subject {\n lift(operator: Operator): Observable;\n }\n}\n```\n\n> More advanced scenarios for working with vendor type-definitions can be found here [Official TypeScript Docs](https://github.com/Microsoft/TypeScript-Handbook/blob/master/pages/Modules.md#working-with-other-javascript-libraries)\n\n[⇧ back to top](#table-of-contents)\n\n## Misc\n\n### - should I still use React.PropTypes in TS?\n\nNo. With TypeScript, using PropTypes is an unnecessary overhead. When declaring Props and State interfaces, you will get complete intellisense and design-time safety with static type checking. This way you'll be safe from runtime errors and you will save a lot of time on debugging. Additional benefit is an elegant and standardized method of documenting your component public API in the source code. \n\n[⇧ back to top](#table-of-contents)\n\n### - when to use `interface` declarations and when `type` aliases?\n\nFrom practical side, using `interface` declaration will create an identity (interface name) in compiler errors, on the contrary `type` aliases doesn't create an identity and will be unwinded to show all the properties and nested types it consists of. \nAlthough I prefer to use `type` most of the time there are some places this can become too noisy when reading compiler errors and that's why I like to leverage this distinction to hide some of not so important type details in errors using interfaces identity.\nRelated `ts-lint` rule: \n\n[⇧ back to top](#table-of-contents)\n\n### - what's better default or named exports?\n\nA common flexible solution is to use module folder pattern, because you can leverage both named and default import when you see fit. \nWith this solution you'll achieve better encapsulation and be able to safely refactor internal naming and folders structure without breaking your consumer code:\n\n```ts\n// 1. create your component files (`select.tsx`) using default export in some folder:\n\n// components/select.tsx\nconst Select: React.FC = (props) => {\n...\nexport default Select;\n\n// 2. in this folder create an `index.ts` file that will re-export components with named exports:\n\n// components/index.ts\nexport { default as Select } from './select';\n...\n\n// 3. now you can import your components in both ways, with named export (better encapsulation) or using default export (internal access):\n\n// containers/container.tsx\nimport { Select } from '@src/components';\nor\nimport Select from '@src/components/select';\n...\n```\n\n[⇧ back to top](#table-of-contents)\n\n### - how to best initialize class instance or static properties?\n\nPrefered modern syntax is to use class Property Initializers \n\n```tsx\nclass ClassCounterWithInitialCount extends React.Component {\n // default props using Property Initializers\n static defaultProps: DefaultProps = {\n className: 'default-class',\n initialCount: 0,\n };\n \n // initial state using Property Initializers\n state: State = {\n count: this.props.initialCount,\n };\n ...\n}\n```\n\n[⇧ back to top](#table-of-contents)\n\n### - how to best declare component handler functions?\n\nPrefered modern syntax is to use Class Fields with arrow functions \n\n```tsx\nclass ClassCounter extends React.Component {\n// handlers using Class Fields with arrow functions\n handleIncrement = () => {\n this.setState({ count: this.state.count + 1 });\n };\n ...\n}\n```\n\n[⇧ back to top](#table-of-contents)\n\n---\n\n# Tutorials & Articles\n\n> Curated list of relevant in-depth tutorials\n\nHigher-Order Components:\n\n- \n\n[⇧ back to top](#table-of-contents)\n\n---\n\n# Contributors\n\nThanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):\n\n\n\n| [ Piotrek Witek](https://github.com/piotrwitek) [💻](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=piotrwitek \"Code\") [📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=piotrwitek \"Documentation\") [🤔](#ideas-piotrwitek \"Ideas, Planning, & Feedback\") [👀](#review-piotrwitek \"Reviewed Pull Requests\") [💬](#question-piotrwitek \"Answering Questions\") | [ Kazz Yokomizo](https://github.com/kazup01) [💵](#financial-kazup01 \"Financial\") [🔍](#fundingFinding-kazup01 \"Funding Finding\") | [ Jake Boone](https://github.com/jakeboone02) [📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=jakeboone02 \"Documentation\") | [ Amit Dahan](https://github.com/amitdahan) [📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=amitdahan \"Documentation\") | [ gulderov](https://github.com/gulderov) [📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=gulderov \"Documentation\") | [ Erik Pearson](https://github.com/emp823) [📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=emp823 \"Documentation\") | [ Bryan Mason](https://github.com/flymason) [📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=flymason \"Documentation\") |\n| :---: | :---: | :---: | :---: | :---: | :---: | :---: |\n| [ Jakub Chodorowicz](http://www.jakub.chodorowicz.pl/) [💻](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=chodorowicz \"Code\") | [ Oleg Maslov](https://github.com/mleg) [🐛](https://github.com/piotrwitek/react-redux-typescript-guide/issues?q=author%3Amleg \"Bug reports\") | [ Aaron Westbrook](https://github.com/awestbro) [🐛](https://github.com/piotrwitek/react-redux-typescript-guide/issues?q=author%3Aawestbro \"Bug reports\") | [ Peter Blazejewicz](http://www.linkedin.com/in/peterblazejewicz) [📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=peterblazejewicz \"Documentation\") | [ Solomon White](https://github.com/rubysolo) [📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=rubysolo \"Documentation\") | [ Levi Rocha](https://github.com/pino) [📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=pino \"Documentation\") | [ Sudachi-kun](http://cloudnative.co.jp) [💵](#financial-loadbalance-sudachi-kun \"Financial\") |\n| [ Sosuke Suzuki](http://sosukesuzuki.github.io) [💻](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=sosukesuzuki \"Code\") | [ Tom Rathbone](https://github.com/chillitom) [📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=chillitom \"Documentation\") | [ Arshad Kazmi](https://arshadkazmi42.github.io/) [📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=arshadkazmi42 \"Documentation\") | [ JeongUkJae](https://jeongukjae.github.io) [📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=JeongUkJae \"Documentation\") |\n\n\nThis project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!\n\n---\n\nMIT License\n\nCopyright (c) 2017 Piotr Witek ()\n"
},
{
"path": "README_SOURCE.md",
"content": "
\n\n# React & Redux in TypeScript - Complete Guide\n\n_\"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.\"_\n\n[](https://spectrum.chat/react-redux-ts)\n[](https://gitter.im/react-redux-typescript-guide/Lobby)\n\n_Found it useful? Want more updates?_\n\n[**Show your support by giving a :star:**](https://github.com/piotrwitek/react-redux-typescript-guide/stargazers)\n\n\n \n\n\n \n\n\n \n\n## **What's new?**\n\n:tada: _Now updated to support **TypeScript v4.6**_ :tada:\n:rocket: _Updated to `typesafe-actions@5.x` :rocket:\n\n \n\n
\n\n### **Goals**\n\n- 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)\n- Make type annotations concise by eliminating redundancy in types using advanced TypeScript Language features like **Type Inference** and **Control flow analysis**\n- Reduce repetition and complexity of types with TypeScript focused [complementary libraries](#react-redux-typescript-ecosystem)\n\n### **React, Redux, Typescript Ecosystem**\n\n- [typesafe-actions](https://github.com/piotrwitek/typesafe-actions) - Typesafe utilities for \"action-creators\" in Redux / Flux Architecture \n- [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. \n- [react-redux-typescript-scripts](https://github.com/piotrwitek/react-redux-typescript-scripts) - dev-tools configuration files shared between projects based on this guide \n\n### **Examples**\n\n- Todo-App playground: [Codesandbox](https://codesandbox.io/s/github/piotrwitek/typesafe-actions/tree/master/codesandbox)\n- React, Redux, TypeScript - RealWorld App: [Github](https://github.com/piotrwitek/react-redux-typescript-realworld-app) | [Demo](https://react-redux-typescript-realworld-app.netlify.com/)\n\n### **Playground Project**\n\n[](https://semaphoreci.com/piotrekwitek/react-redux-typescript-guide)\n\nCheck 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`).\n> 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.\n\n## Contributing Guide\n\nYou 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)\n\n## Funding\n\nYou can also help by funding issues.\nIssues like bug fixes or feature requests can be very quickly resolved when funded through the IssueHunt platform.\n\nI 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.\n\n[](https://issuehunt.io/repos/76996763)\n\n---\n\n🌟 - _New or updated section_\n\n## Table of Contents\n\n\n\n\n\n - [React Types Cheatsheet](#react-types-cheatsheet)\n - [`React.FC` | `React.FunctionComponent`](#reactfcprops--reactfunctioncomponentprops)\n - [`React.Component`](#reactcomponentprops-state)\n - [`React.ComponentType`](#reactcomponenttypeprops)\n - [`React.ComponentProps`](#reactcomponentpropstypeof-xxx)\n - [`React.ReactElement` | `JSX.Element`](#reactreactelement--jsxelement)\n - [`React.ReactNode`](#reactreactnode)\n - [`React.CSSProperties`](#reactcssproperties)\n - [`React.XXXHTMLAttributes`](#reactxxxhtmlattributeshtmlxxxelement)\n - [`React.ReactEventHandler`](#reactreacteventhandlerhtmlxxxelement)\n - [`React.XXXEvent`](#reactxxxeventhtmlxxxelement)\n- [React](#react)\n - [Function Components - FC](#function-components---fc)\n - [- Counter Component](#--counter-component)\n - [- Counter Component with default props](#--counter-component-with-default-props)\n - [- Spreading attributes in Component](#--spreading-attributes-in-component)\n - [Class Components](#class-components)\n - [- Class Counter Component](#--class-counter-component)\n - [- Class Component with default props](#--class-component-with-default-props)\n - [Generic Components](#generic-components)\n - [- Generic List Component](#--generic-list-component)\n - [Hooks](#hooks)\n - [- useState](#--usestate)\n - [- useContext](#--usecontext)\n - [- useReducer](#--usereducer)\n - [Render Props](#render-props)\n - [- Name Provider Component](#--name-provider-component)\n - [- Mouse Provider Component](#--mouse-provider-component)\n - [Higher-Order Components](#higher-order-components)\n - [- HOC wrapping a component](#--hoc-wrapping-a-component)\n - [- HOC wrapping a component and injecting props](#--hoc-wrapping-a-component-and-injecting-props)\n - [- Nested HOC - wrapping a component, injecting props and connecting to redux 🌟](#--nested-hoc---wrapping-a-component-injecting-props-and-connecting-to-redux-)\n - [Redux Connected Components](#redux-connected-components)\n - [- Redux connected counter](#--redux-connected-counter)\n - [- Redux connected counter with own props](#--redux-connected-counter-with-own-props)\n - [- Redux connected counter via hooks](#--redux-connected-counter-via-hooks)\n - [- Redux connected counter with `redux-thunk` integration](#--redux-connected-counter-with-redux-thunk-integration)\n - [Context](#context)\n - [ThemeContext](#themecontext)\n - [ThemeProvider](#themeprovider)\n - [ThemeConsumer](#themeconsumer)\n - [ThemeConsumer in class component](#themeconsumer-in-class-component)\n- [Redux](#redux)\n - [Store Configuration](#store-configuration)\n - [Create Global Store Types](#create-global-store-types)\n - [Create Store](#create-store)\n - [Action Creators 🌟](#action-creators-)\n - [Reducers](#reducers)\n - [State with Type-level Immutability](#state-with-type-level-immutability)\n - [Typing reducer](#typing-reducer)\n - [Typing reducer with `typesafe-actions`](#typing-reducer-with-typesafe-actions)\n - [Testing reducer](#testing-reducer)\n - [Async Flow with `redux-observable`](#async-flow-with-redux-observable)\n - [Typing epics](#typing-epics)\n - [Testing epics](#testing-epics)\n - [Selectors with `reselect`](#selectors-with-reselect)\n - [Connect with `react-redux`](#connect-with-react-redux)\n - [Typing connected component](#typing-connected-component)\n - [Typing `useSelector` and `useDispatch`](#typing-useselector-and-usedispatch)\n - [Typing connected component with `redux-thunk` integration](#typing-connected-component-with-redux-thunk-integration)\n- [Configuration & Dev Tools](#configuration--dev-tools)\n - [Common Npm Scripts](#common-npm-scripts)\n - [tsconfig.json](#tsconfigjson)\n - [TSLib](#tslib)\n - [ESLint](#eslint)\n - [.eslintrc.js](#eslintrcjs)\n - [Jest](#jest)\n - [jest.config.json](#jestconfigjson)\n - [jest.stubs.js](#jeststubsjs)\n - [Style Guides](#style-guides)\n - [react-styleguidist](#react-styleguidist)\n- [FAQ](#faq)\n - [Ambient Modules](#ambient-modules)\n - [Imports in ambient modules](#imports-in-ambient-modules)\n - [Type-Definitions](#type-definitions)\n - [Missing type-definitions error](#missing-type-definitions-error)\n - [Using custom `d.ts` files for npm modules](#using-custom-dts-files-for-npm-modules)\n - [Type Augmentation](#type-augmentation)\n - [Augmenting library internal declarations - using relative import](#augmenting-library-internal-declarations---using-relative-import)\n - [Augmenting library public declarations - using node_modules import](#augmenting-library-public-declarations---using-node_modules-import)\n - [Misc](#misc)\n - [- should I still use React.PropTypes in TS?](#--should-i-still-use-reactproptypes-in-ts)\n - [- when to use `interface` declarations and when `type` aliases?](#--when-to-use-interface-declarations-and-when-type-aliases)\n - [- what's better default or named exports?](#--whats-better-default-or-named-exports)\n - [- how to best initialize class instance or static properties?](#--how-to-best-initialize-class-instance-or-static-properties)\n - [- how to best declare component handler functions?](#--how-to-best-declare-component-handler-functions)\n- [Tutorials & Articles](#tutorials--articles)\n- [Contributors](#contributors)\n\n\n\n---\n\n# Installation\n\n## Types for React & Redux\n\n```\nnpm i -D @types/react @types/react-dom @types/react-redux\n```\n\n\"react\" - `@types/react` \n\"react-dom\" - `@types/react-dom` \n\"redux\" - (types included with npm package)* \n\"react-redux\" - `@types/react-redux` \n\n> *NB: Guide is based on types for Redux >= v4.x.x.\n\n[⇧ back to top](#table-of-contents)\n\n---\n\n## React Types Cheatsheet\n\n### `React.FC` | `React.FunctionComponent`\n\nType representing a functional component\n\n```tsx\nconst MyComponent: React.FC = ...\n```\n\n### `React.Component`\n\nType representing a class component\n\n```tsx\nclass MyComponent extends React.Component { ...\n```\n\n### `React.ComponentType`\n\nType representing union of (`React.FC | React.Component`) - used in HOC\n\n```tsx\nconst withState =
(\n WrappedComponent: React.ComponentType
,\n) => { ...\n```\n\n### `React.ComponentProps`\n\nGets Props type of a specified component XXX (WARNING: does not work with statically declared default props and generic props)\n\n```tsx\ntype MyComponentProps = React.ComponentProps;\n```\n\n### `React.ReactElement` | `JSX.Element`\n\nType representing a concept of React Element - representation of a native DOM component (e.g. ``), or a user-defined composite component (e.g. ``)\n\n```tsx\nconst elementOnly: React.ReactElement = || ;\n```\n\n### `React.ReactNode`\n\nType representing any possible type of React node (basically ReactElement (including Fragments and Portals) + primitive JS types)\n\n```tsx\nconst elementOrPrimitive: React.ReactNode = 'string' || 0 || false || null || undefined || || ;\nconst Component = ({ children: React.ReactNode }) => ...\n```\n\n### `React.CSSProperties`\n\nType representing style object in JSX - for css-in-js styles\n\n```tsx\nconst styles: React.CSSProperties = { flexDirection: 'row', ...\nconst element =
![](\"https://avatars0.githubusercontent.com/u/739075?v=4\")
![](\"https://avatars3.githubusercontent.com/u/8602615?v=4\")
![](\"https://avatars1.githubusercontent.com/u/366438?v=4\")
![](\"https://avatars1.githubusercontent.com/u/9748762?v=4\")
![](\"https://avatars1.githubusercontent.com/u/98167?v=4\")
![](\"https://avatars1.githubusercontent.com/u/1964212?v=4\")
![](\"https://avatars1.githubusercontent.com/u/5342677?v=4\")
![](\"https://avatars1.githubusercontent.com/u/119451?v=4\")
![](\"https://avatars1.githubusercontent.com/u/7266431?v=4\")
![](\"https://avatars0.githubusercontent.com/u/3393293?v=4\")
![](\"https://avatars3.githubusercontent.com/u/14539?v=4\")
![](\"https://avatars3.githubusercontent.com/u/1642?v=4\")
![](\"https://avatars2.githubusercontent.com/u/8838006?v=4\")
![](\"https://avatars1.githubusercontent.com/u/41281835?v=4\")
![](\"https://avatars1.githubusercontent.com/u/14838850?v=4\")
![](\"https://avatars0.githubusercontent.com/u/74433?v=4\")
![](\"https://avatars3.githubusercontent.com/u/4654382?v=4\")
![](\"https://avatars1.githubusercontent.com/u/8815362?v=4\")
![\"Buy](\"https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png\")
\n\n\n ![\"Become](\"https://c5.patreon.com/external/logo/become_a_patron_button@2x.png\"){kind=logo}
\n\n\n