Skip to content

Commit b49c2d7

Browse files
piotrwitekpiotrwitek
committed
Updated readme Intro & TOC
1 parent 4efeb21 commit b49c2d7

File tree

3 files changed

+49
-66
lines changed

3 files changed

+49
-66
lines changed

‎README.md

+31-53
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div align="center">
22

3-
## React & Redux in TypeScript - Static Typing Guide
3+
# React & Redux in TypeScript Guide
44

55
_"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."_
66

@@ -20,44 +20,48 @@ _Found it useful? Want more updates?_
2020

2121
<br/><hr/>
2222

23-
:tada: _Now updated to support **TypeScript v3.4**_ :tada:
23+
### **What's new?**
24+
25+
:tada: _Now updated to support **TypeScript v3.7**_ :tada:
2426

2527
<hr/><br/>
2628

2729
</div>
2830

29-
**Goals**
31+
### **Goals**
3032

3133
- 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)
3234
- Make type annotations concise by eliminating redundancy in types using advanced TypeScript Language features like **Type Inference** and **Control flow analysis**
3335
- Reduce repetition and complexity of types with TypeScript focused [complementary libraries](#complementary-libraries)
3436

35-
**React, Redux, Typescript Ecosystem**
37+
### **React, Redux, Typescript Ecosystem**
3638

3739
- [typesafe-actions](https://github.com/piotrwitek/typesafe-actions) - Typesafe utilities for "action-creators" in Redux / Flux Architecture
3840
- [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.
3941
- [react-redux-typescript-scripts](https://github.com/piotrwitek/react-redux-typescript-scripts) - dev-tools configuration files shared between projects based on this guide
4042

41-
**Codesandbox links**
43+
### **Examples**
4244

43-
- Reference Todo-App implementation using **React, Redux, Typescript Guide**: [Link](https://codesandbox.io/s/github/piotrwitek/typesafe-actions/tree/master/codesandbox)
45+
- Todo-App playground: [Codesandbox](https://codesandbox.io/s/github/piotrwitek/typesafe-actions/tree/master/codesandbox)
46+
- React, Redux, TypeScript - RealWorld App: [Github](https://github.com/piotrwitek/react-redux-typescript-realworld-app) | [Demo](https://react-redux-typescript-realworld-app.netlify.com/)
4447

45-
**Playground Project**
48+
### **Playground Project**
4649

4750
[![Build Status](https://semaphoreci.com/api/v1/piotrekwitek/react-redux-typescript-guide/branches/master/shields_badge.svg)](https://semaphoreci.com/piotrekwitek/react-redux-typescript-guide)
4851

49-
You should check out Playground Project located in the `/playground` folder. It is a source of all 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`.
52+
Check out our Playground Project located in the `/playground` folder. It contains all source files of the code examples found in the guide. They are all tested with the most recent version of TypeScript and 3rd party type-definitions (like `@types/react` or `@types/react-redux`) to ensure the examples are up-to-date and not broken with updated definitions (It's based on `create-react-app --typescript`).
5053
> 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.
5154
5255
## Contributing Guide
53-
We are open for contributions. If you're planning to contribute please make sure to read the contributing guide: [CONTRIBUTING.md](/CONTRIBUTING.md)
56+
57+
You can help make this project better by contributing. If you're planning to contribute please make sure to check our contributing guide: [CONTRIBUTING.md](/CONTRIBUTING.md)
5458

5559
## Funding
56-
This is an independent open-source project created by people investing their free time for the benefit of our community.
5760

58-
If you are using it please consider donating as this will guarantee the project will be updated and maintained in the long run.
61+
You can also help by funding issues.
62+
Issues like bug fixes or feature requests can be very quickly resolved when funded through the IssueHunt platform.
5963

60-
Issues can be funded by anyone interested in them being resolved. Reward will be transparently distributed to the contributor handling the task through the IssueHunt platform.
64+
I highly recommend to add a bounty to the issue that you're waiting for to increase priority and attract contributors willing to work on it.
6165

6266
[![Let's fund issues in this repository](https://issuehunt.io/static/embed/issuehunt-button-v1.svg)](https://issuehunt.io/repos/76996763)
6367

@@ -66,6 +70,7 @@ Issues can be funded by anyone interested in them being resolved. Reward will be
6670
🌟 - _New or updated section_
6771

6872
## Table of Contents
73+
6974
- [Installation](#installation)
7075
- [React - Type-Definitions Cheatsheet](#react---type-definitions-cheatsheet)
7176
- [React - Typing Patterns](#react---typing-patterns)
@@ -344,12 +349,6 @@ export class ClassCounterWithDefaultProps extends React.Component<
344349
count: this.props.initialCount,
345350
};
346351

347-
componentWillReceiveProps({ initialCount }: Props) {
348-
if (initialCount != null && initialCount !== this.props.initialCount) {
349-
this.setState({ count: initialCount });
350-
}
351-
}
352-
353352
handleIncrement = () => {
354353
this.setState({ count: this.state.count + 1 });
355354
};
@@ -498,22 +497,19 @@ export class MouseProvider extends React.Component<MouseProviderProps, MouseProv
498497
Adds state to a stateless counter
499498
500499
```tsx
501-
import * as React from 'react';
502-
import { Subtract } from 'utility-types';
500+
import React from 'react';
501+
import { Diff } from 'utility-types';
503502

504-
// These props will be subtracted from base component props
503+
// These props will be injected into the base component
505504
interface InjectedProps {
506505
count: number;
507506
onIncrement: () => void;
508507
}
509508

510509
export const withState = <BaseProps extends InjectedProps>(
511-
_BaseComponent: React.ComponentType<BaseProps>
510+
BaseComponent: React.ComponentType<BaseProps>
512511
) => {
513-
// fix for TypeScript issues: https://github.com/piotrwitek/react-redux-typescript-guide/issues/111
514-
const BaseComponent = _BaseComponent as React.ComponentType<InjectedProps>;
515-
516-
type HocProps = Subtract<BaseProps, InjectedProps> & {
512+
type HocProps = Diff<BaseProps, InjectedProps> & {
517513
// here you can extend hoc with new props
518514
initialCount?: number;
519515
};
@@ -543,7 +539,7 @@ export const withState = <BaseProps extends InjectedProps>(
543539
<BaseComponent
544540
count={count} // injected
545541
onIncrement={this.handleIncrement} // injected
546-
{...restProps}
542+
{...(restProps as BaseProps)}
547543
/>
548544
);
549545
}
@@ -572,23 +568,14 @@ export default () => <FCCounterWithState label={'FCCounterWithState'} />;
572568
Adds error handling using componentDidCatch to any component
573569
574570
```tsx
575-
import * as React from 'react';
576-
import { Subtract } from 'utility-types';
571+
import React from 'react';
577572

578573
const MISSING_ERROR = 'Error was swallowed during propagation.';
579574

580-
// These props will be subtracted from base component props
581-
interface InjectedProps {
582-
onReset: () => void;
583-
}
584-
585-
export const withErrorBoundary = <BaseProps extends InjectedProps>(
586-
_BaseComponent: React.ComponentType<BaseProps>
575+
export const withErrorBoundary = <BaseProps extends {}>(
576+
BaseComponent: React.ComponentType<BaseProps>
587577
) => {
588-
// fix for TypeScript issues: https://github.com/piotrwitek/react-redux-typescript-guide/issues/111
589-
const BaseComponent = _BaseComponent as React.ComponentType<InjectedProps>;
590-
591-
type HocProps = Subtract<BaseProps, InjectedProps> & {
578+
type HocProps = {
592579
// here you can extend hoc with new props
593580
};
594581
type HocState = {
@@ -614,21 +601,12 @@ export const withErrorBoundary = <BaseProps extends InjectedProps>(
614601
// TODO: send error report to service provider
615602
};
616603

617-
handleReset = () => {
618-
this.setState({ error: undefined });
619-
};
620-
621604
render() {
622605
const { children, ...restProps } = this.props;
623606
const { error } = this.state;
624607

625608
if (error) {
626-
return (
627-
<BaseComponent
628-
onReset={this.handleReset} // injected
629-
{...restProps}
630-
/>
631-
);
609+
return <BaseComponent {...(restProps as BaseProps)} />;
632610
}
633611

634612
return children;
@@ -1348,16 +1326,16 @@ const initialState: TodosState = {
13481326
};
13491327

13501328
const todos = createReducer(initialState.todos)
1351-
.handleAction(ADD, (state, action) => [...state, action.payload])
1352-
.handleAction(TOGGLE, (state, action) =>
1329+
.handleType(ADD, (state, action) => [...state, action.payload])
1330+
.handleType(TOGGLE, (state, action) =>
13531331
state.map(item =>
13541332
item.id === action.payload
13551333
? { ...item, completed: !item.completed }
13561334
: item
13571335
)
13581336
);
13591337

1360-
const todosFilter = createReducer(initialState.todosFilter).handleAction(
1338+
const todosFilter = createReducer(initialState.todosFilter).handleType(
13611339
CHANGE_FILTER,
13621340
(state, action) => action.payload
13631341
);

‎README_SOURCE.md

+17-12
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div align="center">
22

3-
## React & Redux in TypeScript - Static Typing Guide
3+
# React & Redux in TypeScript Guide
44

55
_"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."_
66

@@ -20,44 +20,48 @@ _Found it useful? Want more updates?_
2020

2121
<br/><hr/>
2222

23-
:tada: _Now updated to support **TypeScript v3.4**_ :tada:
23+
### **What's new?**
24+
25+
:tada: _Now updated to support **TypeScript v3.7**_ :tada:
2426

2527
<hr/><br/>
2628

2729
</div>
2830

29-
**Goals**
31+
### **Goals**
3032

3133
- 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)
3234
- Make type annotations concise by eliminating redundancy in types using advanced TypeScript Language features like **Type Inference** and **Control flow analysis**
3335
- Reduce repetition and complexity of types with TypeScript focused [complementary libraries](#complementary-libraries)
3436

35-
**React, Redux, Typescript Ecosystem**
37+
### **React, Redux, Typescript Ecosystem**
3638

3739
- [typesafe-actions](https://github.com/piotrwitek/typesafe-actions) - Typesafe utilities for "action-creators" in Redux / Flux Architecture
3840
- [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.
3941
- [react-redux-typescript-scripts](https://github.com/piotrwitek/react-redux-typescript-scripts) - dev-tools configuration files shared between projects based on this guide
4042

41-
**Codesandbox links**
43+
### **Examples**
4244

43-
- Reference Todo-App implementation using **React, Redux, Typescript Guide**: [Link](https://codesandbox.io/s/github/piotrwitek/typesafe-actions/tree/master/codesandbox)
45+
- Todo-App playground: [Codesandbox](https://codesandbox.io/s/github/piotrwitek/typesafe-actions/tree/master/codesandbox)
46+
- React, Redux, TypeScript - RealWorld App: [Github](https://github.com/piotrwitek/react-redux-typescript-realworld-app) | [Demo](https://react-redux-typescript-realworld-app.netlify.com/)
4447

45-
**Playground Project**
48+
### **Playground Project**
4649

4750
[![Build Status](https://semaphoreci.com/api/v1/piotrekwitek/react-redux-typescript-guide/branches/master/shields_badge.svg)](https://semaphoreci.com/piotrekwitek/react-redux-typescript-guide)
4851

49-
You should check out Playground Project located in the `/playground` folder. It is a source of all 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`.
52+
Check out our Playground Project located in the `/playground` folder. It contains all source files of the code examples found in the guide. They are all tested with the most recent version of TypeScript and 3rd party type-definitions (like `@types/react` or `@types/react-redux`) to ensure the examples are up-to-date and not broken with updated definitions (It's based on `create-react-app --typescript`).
5053
> 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.
5154
5255
## Contributing Guide
53-
We are open for contributions. If you're planning to contribute please make sure to read the contributing guide: [CONTRIBUTING.md](/CONTRIBUTING.md)
56+
57+
You can help make this project better by contributing. If you're planning to contribute please make sure to check our contributing guide: [CONTRIBUTING.md](/CONTRIBUTING.md)
5458

5559
## Funding
56-
This is an independent open-source project created by people investing their free time for the benefit of our community.
5760

58-
If you are using it please consider donating as this will guarantee the project will be updated and maintained in the long run.
61+
You can also help by funding issues.
62+
Issues like bug fixes or feature requests can be very quickly resolved when funded through the IssueHunt platform.
5963

60-
Issues can be funded by anyone interested in them being resolved. Reward will be transparently distributed to the contributor handling the task through the IssueHunt platform.
64+
I highly recommend to add a bounty to the issue that you're waiting for to increase priority and attract contributors willing to work on it.
6165

6266
[![Let's fund issues in this repository](https://issuehunt.io/static/embed/issuehunt-button-v1.svg)](https://issuehunt.io/repos/76996763)
6367

@@ -66,6 +70,7 @@ Issues can be funded by anyone interested in them being resolved. Reward will be
6670
🌟 - _New or updated section_
6771

6872
## Table of Contents
73+
6974
- [Installation](#installation)
7075
- [React - Type-Definitions Cheatsheet](#react---type-definitions-cheatsheet)
7176
- [React - Typing Patterns](#react---typing-patterns)

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"husky": "3.0.9"
77
},
88
"scripts": {
9-
"ci-check": "npm run readme:generate",
9+
"ci-check": "npm run doctoc && npm run readme:generate",
1010
"doctoc": "doctoc --maxlevel=4 README_SOURCE.md",
1111
"readme:generate": "node generate-readme",
1212
"contributors:check": "all-contributors check",

0 commit comments

Comments
 (0)