Skip to content

Commit 2eca546

Browse files
committed
final touches
1 parent 1988440 commit 2eca546

File tree

4 files changed

+26
-24
lines changed

4 files changed

+26
-24
lines changed

README.md

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,13 @@ You should check Playground Project located in the `/playground` folder. It is a
2626
- [Redux](#redux)
2727
- [Action Creators](#action-creators) 📝 __UPDATED__
2828
- [Reducers](#reducers) 📝 __UPDATED__
29+
- [State with Type-level Immutability](#state-with-type-level-immutability)
30+
- [Reducer Example](#reducer-example)
2931
- [Store Configuration](#store-configuration)
30-
- [Async Flow](#async-flow) _("redux-observable")_ 📝 __UPDATED__
31-
- [Selectors](#selectors) _("reselect")_
32+
- [Async Flow](#async-flow) 📝 __UPDATED__
33+
- [Selectors](#selectors)
3234
- [Tools](#tools)
33-
- [Living Style Guide](#living-style-guide) _("react-styleguidist")_ 🌟 __NEW__
35+
- [Living Style Guide](#living-style-guide) 🌟 __NEW__
3436
- [Extras](#extras)
3537
- [tsconfig.json](#tsconfigjson)
3638
- [tslint.json](#tslintjson)
@@ -502,13 +504,13 @@ export default (() => (
502504
## Redux Connected Components
503505
504506
### Caveat with `bindActionCreators`
505-
**If you try to use `connect` or `bindActionCreators` explicitly and type your component callback props as `() => void` this will raise compiler errors because `bindActionCreators` typings will not map your action creator type correctly due to current TypeScript limitations.**
507+
**If you try to use `connect` or `bindActionCreators` explicitly and want to type your component callback props as `() => void` this will raise compiler errors. I happens because `bindActionCreators` typings will not map the return type of action creators to `void`, due to a current TypeScript limitations.**
506508
507-
A decent alternative I can recommend to use is a `() => any` type, it will work just fine in all possible scenarios and should not cause any typing problems whatsoever. All the code examples in the Guide with `connect` are also using this pattern.
509+
A decent alternative I can recommend is to use `() => any` type, it will work just fine in all possible scenarios and should not cause any typing problems whatsoever. All the code examples in the Guide with `connect` are also using this pattern.
508510
509511
> If there is any progress or fix in regard to the above caveat I'll update the guide and make an announcement on my twitter/medium (There are a few existing proposals already).
510512
511-
> There is also a way to retain type soundness but it will involve an explicit wrapping with `dispatch` and is very tedious for the long run. See example below:
513+
> There is alternative way to retain type soundness but it requires an explicit wrapping with `dispatch` and will be very tedious for the long run. See example below:
512514
```
513515
const mapDispatchToProps = (dispatch: Dispatch) => ({
514516
onIncrement: () => dispatch(actions.increment()),
@@ -641,7 +643,8 @@ export default () => (
641643
> Using Typesafe Action Creators helpers for Redux [`typesafe-actions`](https://github.com/piotrwitek/typesafe-actions)
642644
643645
A recommended approach is to use a simple functional helper to automate the creation of type-safe action creators. The advantage is that we can reduce a lot of code repetition and also minimize surface of errors by using type-checked API.
644-
> There are more specialized functional helpers available that will help you to further reduce tedious boilerplate and type-annotations in common scenarios like reducers (`getType`) or epics (`isActionOf`). All that without losing type-safety! Please check very short [Tutorial](https://github.com/piotrwitek/typesafe-actions#tutorial)
646+
> There are more specialized functional helpers available that will help you to further reduce tedious boilerplate and type-annotations in common scenarios like reducers (`getType`) or epics (`isActionOf`).
647+
All that without losing type-safety! Please check this very short [Tutorial](https://github.com/piotrwitek/typesafe-actions#tutorial)
645648
646649
```tsx
647650
import { createAction } from 'typesafe-actions';
@@ -672,9 +675,6 @@ store.dispatch(actions.increment()); // OK => { type: "INCREMENT" }
672675
---
673676
674677
## Reducers
675-
Relevant TypeScript Docs references:
676-
- [Discriminated Union types](https://www.typescriptlang.org/docs/handbook/advanced-types.html)
677-
- [Mapped types](https://www.typescriptlang.org/docs/handbook/advanced-types.html) e.g. `Readonly` & `Partial`
678678
679679
### State with Type-level Immutability
680680
Declare reducer `State` type with `readonly` modifier to get "type level" immutability
@@ -712,7 +712,7 @@ state.containerObject.mutableProp = 1; // OK! No error, can be mutated
712712
```
713713
714714
#### Best-practices for nested immutability
715-
> use `Readonly` or `ReadonlyArray` mapped types
715+
> use `Readonly` or `ReadonlyArray` [Mapped types](https://www.typescriptlang.org/docs/handbook/advanced-types.html)
716716
717717
```ts
718718
export type State = Readonly<{
@@ -731,7 +731,8 @@ state.counterPairs[0].immutableCounter2 = 1; // Error, cannot be mutated
731731
732732
[⇧ back to top](#table-of-contents)
733733
734-
### Finished reducer example using `getType` helper
734+
### Reducer Example
735+
> using `getType` helper and [Discriminated Union types](https://www.typescriptlang.org/docs/handbook/advanced-types.html)
735736
736737
```tsx
737738
import { combineReducers } from 'redux';

docs/markdown/1_react.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -135,13 +135,13 @@ Adds error handling using componentDidCatch to any component
135135
## Redux Connected Components
136136
137137
### Caveat with `bindActionCreators`
138-
**If you try to use `connect` or `bindActionCreators` explicitly and type your component callback props as `() => void` this will raise compiler errors because `bindActionCreators` typings will not map your action creator type correctly due to current TypeScript limitations.**
138+
**If you try to use `connect` or `bindActionCreators` explicitly and want to type your component callback props as `() => void` this will raise compiler errors. I happens because `bindActionCreators` typings will not map the return type of action creators to `void`, due to a current TypeScript limitations.**
139139
140-
A decent alternative I can recommend to use is a `() => any` type, it will work just fine in all possible scenarios and should not cause any typing problems whatsoever. All the code examples in the Guide with `connect` are also using this pattern.
140+
A decent alternative I can recommend is to use `() => any` type, it will work just fine in all possible scenarios and should not cause any typing problems whatsoever. All the code examples in the Guide with `connect` are also using this pattern.
141141
142142
> If there is any progress or fix in regard to the above caveat I'll update the guide and make an announcement on my twitter/medium (There are a few existing proposals already).
143143
144-
> There is also a way to retain type soundness but it will involve an explicit wrapping with `dispatch` and is very tedious for the long run. See example below:
144+
> There is alternative way to retain type soundness but it requires an explicit wrapping with `dispatch` and will be very tedious for the long run. See example below:
145145
```
146146
const mapDispatchToProps = (dispatch: Dispatch) => ({
147147
onIncrement: () => dispatch(actions.increment()),

docs/markdown/2_redux.md

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
> Using Typesafe Action Creators helpers for Redux [`typesafe-actions`](https://github.com/piotrwitek/typesafe-actions)
66
77
A recommended approach is to use a simple functional helper to automate the creation of type-safe action creators. The advantage is that we can reduce a lot of code repetition and also minimize surface of errors by using type-checked API.
8-
> There are more specialized functional helpers available that will help you to further reduce tedious boilerplate and type-annotations in common scenarios like reducers (`getType`) or epics (`isActionOf`). All that without losing type-safety! Please check very short [Tutorial](https://github.com/piotrwitek/typesafe-actions#tutorial)
8+
> There are more specialized functional helpers available that will help you to further reduce tedious boilerplate and type-annotations in common scenarios like reducers (`getType`) or epics (`isActionOf`).
9+
All that without losing type-safety! Please check this very short [Tutorial](https://github.com/piotrwitek/typesafe-actions#tutorial)
910

1011
::example='../../playground/src/redux/counters/actions.ts'::
1112
::usage='../../playground/src/redux/counters/actions.usage.ts'::
@@ -15,9 +16,6 @@ A recommended approach is to use a simple functional helper to automate the crea
1516
---
1617

1718
## Reducers
18-
Relevant TypeScript Docs references:
19-
- [Discriminated Union types](https://www.typescriptlang.org/docs/handbook/advanced-types.html)
20-
- [Mapped types](https://www.typescriptlang.org/docs/handbook/advanced-types.html) e.g. `Readonly` & `Partial`
2119

2220
### State with Type-level Immutability
2321
Declare reducer `State` type with `readonly` modifier to get "type level" immutability
@@ -55,7 +53,7 @@ state.containerObject.mutableProp = 1; // OK! No error, can be mutated
5553
```
5654

5755
#### Best-practices for nested immutability
58-
> use `Readonly` or `ReadonlyArray` mapped types
56+
> use `Readonly` or `ReadonlyArray` [Mapped types](https://www.typescriptlang.org/docs/handbook/advanced-types.html)
5957
6058
```ts
6159
export type State = Readonly<{
@@ -74,7 +72,8 @@ state.counterPairs[0].immutableCounter2 = 1; // Error, cannot be mutated
7472
7573
[⇧ back to top](#table-of-contents)
7674

77-
### Finished reducer example using `getType` helper
75+
### Reducer Example
76+
> using `getType` helper and [Discriminated Union types](https://www.typescriptlang.org/docs/handbook/advanced-types.html)
7877
7978
::example='../../playground/src/redux/counters/reducer.ts'::
8079

docs/markdown/_toc.md

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,13 @@
1010
- [Redux](#redux)
1111
- [Action Creators](#action-creators) 📝 __UPDATED__
1212
- [Reducers](#reducers) 📝 __UPDATED__
13+
- [State with Type-level Immutability](#state-with-type-level-immutability)
14+
- [Reducer Example](#reducer-example)
1315
- [Store Configuration](#store-configuration)
14-
- [Async Flow](#async-flow) _("redux-observable")_ 📝 __UPDATED__
15-
- [Selectors](#selectors) _("reselect")_
16+
- [Async Flow](#async-flow) 📝 __UPDATED__
17+
- [Selectors](#selectors)
1618
- [Tools](#tools)
17-
- [Living Style Guide](#living-style-guide) _("react-styleguidist")_ 🌟 __NEW__
19+
- [Living Style Guide](#living-style-guide) 🌟 __NEW__
1820
- [Extras](#extras)
1921
- [tsconfig.json](#tsconfigjson)
2022
- [tslint.json](#tslintjson)

0 commit comments

Comments
 (0)