@@ -102,7 +102,7 @@ const incrementCount = () => count++;
102
102
103
103
export default () => (
104
104
<SFCCounter
105
- label = ' SFCCounter'
105
+ label = { ' SFCCounter' }
106
106
count = { count }
107
107
onIncrement = { incrementCount }
108
108
/>
@@ -148,7 +148,6 @@ export default () => (
148
148
/>
149
149
);
150
150
151
-
152
151
```
153
152
</p ></details >
154
153
@@ -270,7 +269,7 @@ export const StatefulCounterWithInitialCount: React.ComponentClass<StatefulCount
270
269
</div >
271
270
);
272
271
}
273
- }
272
+ };
274
273
275
274
```
276
275
@@ -305,7 +304,7 @@ import * as React from 'react';
305
304
export interface GenericListProps <T > {
306
305
items: T [],
307
306
itemRenderer: (item : T ) => JSX .Element ,
308
- };
307
+ }
309
308
310
309
export class GenericList <T > extends React .Component <GenericListProps <T >, {}> {
311
310
render() {
@@ -326,7 +325,7 @@ export class GenericList<T> extends React.Component<GenericListProps<T>, {}> {
326
325
``` tsx
327
326
import * as React from ' react' ;
328
327
329
- import { IUser } from ' @src/models'
328
+ import { IUser } from ' @src/models' ;
330
329
import { GenericList } from ' @src/components' ;
331
330
332
331
export const UserList = class extends GenericList <IUser > { };
@@ -373,7 +372,7 @@ import { SFCCounterConnected } from '@src/connected';
373
372
374
373
export default () => (
375
374
<SFCCounterConnected
376
- label = " SFCCounterConnected"
375
+ label = { ' SFCCounterConnected' }
377
376
/>
378
377
);
379
378
@@ -414,7 +413,7 @@ import { SFCCounterConnectedVerbose } from '@src/connected';
414
413
415
414
export default () => (
416
415
<SFCCounterConnectedVerbose
417
- label = " SFCCounterConnectedVerbose"
416
+ label = { ' SFCCounterConnectedVerbose' }
418
417
/>
419
418
);
420
419
@@ -455,7 +454,7 @@ import { SFCCounterConnectedExtended } from '@src/connected';
455
454
456
455
export default () => (
457
456
<SFCCounterConnectedExtended
458
- label = " SFCCounterConnectedExtended"
457
+ label = { ' SFCCounterConnectedExtended' }
459
458
initialCount = { 10 }
460
459
/>
461
460
);
@@ -495,7 +494,7 @@ export function withState<WrappedComponentProps extends RequiredProps>(
495
494
496
495
state: State = {
497
496
count: 0 ,
498
- }
497
+ };
499
498
500
499
handleIncrement = () => {
501
500
this .setState ({ count: this .state .count + 1 });
@@ -650,7 +649,7 @@ export type Actions = {
650
649
};
651
650
652
651
// Action Creators
653
- export const actionCreatorss = {
652
+ export const actionCreators = {
654
653
incrementSfc : (): Actions [typeof INCREMENT_SFC ] => ({
655
654
type: INCREMENT_SFC ,
656
655
}),
@@ -666,7 +665,7 @@ export const actionCreatorss = {
666
665
import store from ' @src/store' ;
667
666
import { actionCreators } from ' @src/redux/counters' ;
668
667
669
- store .dispatch (actionCreators .incrementSfc (1 )); // Error: Expected 0 arguments, but got 1.
668
+ // store.dispatch(actionCreators.incrementSfc(1)); // Error: Expected 0 arguments, but got 1.
670
669
store .dispatch (actionCreators .incrementSfc ()); // OK => { type: "INCREMENT_SFC" }
671
670
672
671
```
@@ -710,7 +709,7 @@ Relevant TypeScript Docs references:
710
709
- [ Discriminated Union types] ( https://www.typescriptlang.org/docs/handbook/advanced-types.html )
711
710
- [ Mapped types] ( https://www.typescriptlang.org/docs/handbook/advanced-types.html ) e.g. ` Readonly ` & ` Partial `
712
711
713
- ### Typing Reducer State
712
+ ### Reducer State
714
713
Declare reducer ` State ` type definition with readonly modifier for ` type level ` immutability
715
714
``` ts
716
715
export type State = {
@@ -796,16 +795,18 @@ export const reducer = combineReducers<State, RootAction>({
796
795
797
796
### Reducer with static ` type ` property from helper factory function - ` createActionCreator `
798
797
``` ts
799
- export default function reducer(state = 0 , action : RootAction ): State {
800
- switch (action .type ) {
801
- case actionCreators .increment .type :
802
- return state .counter + 1 ;
803
- case actionCreators .decrement .type :
804
- return state .counter - 1 ;
805
-
806
- default : return state ;
807
- }
808
- }
798
+ export const reducer: Reducer <State > =
799
+ (state = 0 , action : RootAction ) => {
800
+ switch (action .type ) {
801
+ case actionCreators .increment .type :
802
+ return state + 1 ;
803
+
804
+ case actionCreators .decrement .type :
805
+ return state - 1 ;
806
+
807
+ default : return state ;
808
+ }
809
+ };
809
810
```
810
811
811
812
---
@@ -869,8 +870,7 @@ export const rootReducer = combineReducers<RootState, RootAction>({
869
870
``` tsx
870
871
import { createStore , applyMiddleware , compose } from ' redux' ;
871
872
import { createEpicMiddleware } from ' redux-observable' ;
872
- import { rootReducer , rootEpic } from ' @src/redux' ;
873
- import { RootState } from ' @src/redux' ;
873
+ import { rootReducer , rootEpic , RootState } from ' @src/redux' ;
874
874
875
875
const composeEnhancers = (
876
876
process .env .NODE_ENV === ' development' &&
0 commit comments