Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React+Redux+Typescript

 React+Redux+Typescript

How to benefit from types in apps where data plays a central role in the app flow?

This talk I show some tips and tricks to not just avoid type fight, but embrace all power of smart types!

82d2b4bab91a8216032461d552fbc3a6?s=128

AbraaoAlves

August 22, 2019
Tweet

More Decks by AbraaoAlves

Other Decks in Programming

Transcript

  1. React + Redux + Typescript #ReactPOA TS @Abraao4lves

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

  3. None
  4. None
  5. None
  6. AGENDA Typescript App Data Flow Transform your Types like your

    data RootState Case Study
  7. GitHub Language Growth

  8. None
  9. None
  10. None
  11. Without types

  12. With types

  13. Types are contracts, but no necessary fixed or rigid, and

    no necessary defined by you
  14. Heroes without cap

  15. Where to find types?

  16. Where to find types?

  17. Where to find types?

  18. DATA FLOW

  19. DATA FLOW

  20. TYPE TYPE FLOW

  21. TYPE FLOW MAP

  22. TYPE FLOW FUNCTION

  23. HOW?

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

  25. DEMO SAGA

  26. DEMO SELECTOR

  27. DEMO COMPONENT

  28. HOW TO BE SMART INFEROUTPUT

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

  30. HOW TO BE SMART: infer your action contracts

  31. HOW TO BE SMART: infer your data contracts

  32. Types are contracts, but no necessary fixed or rigid, and

    no necessary defined by you
  33. 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
  34. Thanks, ReactPOA @Abraao4lves