Slide 1

Slide 1 text

React + Redux + Typescript #ReactPOA TS @Abraao4lves

Slide 2

Slide 2 text

Hi, I’m AbraãoAlves @Abraao4lves abraaoalves.github.io

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

AGENDA Typescript App Data Flow Transform your Types like your data RootState Case Study

Slide 7

Slide 7 text

GitHub Language Growth

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Without types

Slide 12

Slide 12 text

With types

Slide 13

Slide 13 text

Types are contracts, but no necessary fixed or rigid, and no necessary defined by you

Slide 14

Slide 14 text

Heroes without cap

Slide 15

Slide 15 text

Where to find types?

Slide 16

Slide 16 text

Where to find types?

Slide 17

Slide 17 text

Where to find types?

Slide 18

Slide 18 text

DATA FLOW

Slide 19

Slide 19 text

DATA FLOW

Slide 20

Slide 20 text

TYPE TYPE FLOW

Slide 21

Slide 21 text

TYPE FLOW MAP

Slide 22

Slide 22 text

TYPE FLOW FUNCTION

Slide 23

Slide 23 text

HOW?

Slide 24

Slide 24 text

DEMO https://github.com/AbraaoAlves/react-redux-sagas-ts-hmr

Slide 25

Slide 25 text

DEMO SAGA

Slide 26

Slide 26 text

DEMO SELECTOR

Slide 27

Slide 27 text

DEMO COMPONENT

Slide 28

Slide 28 text

HOW TO BE SMART INFEROUTPUT

Slide 29

Slide 29 text

INFER INPUT HOW TO BE SMART https://github.com/AbraaoAlves/react-redux-sagas-ts-hmr/blob/master/src/core/rootReducer.ts

Slide 30

Slide 30 text

HOW TO BE SMART: infer your action contracts

Slide 31

Slide 31 text

HOW TO BE SMART: infer your data contracts

Slide 32

Slide 32 text

Types are contracts, but no necessary fixed or rigid, and no necessary defined by you

Slide 33

Slide 33 text

Types are contracts, but no necessary fixed or rigid, and no necessary defined by you Types are contracts, it’s can be dynamic, smart, and infered

Slide 34

Slide 34 text

Thanks, ReactPOA @Abraao4lves