Let's discover React and Redux with TypeScript
-
Upload
mathieu-savy -
Category
Software
-
view
416 -
download
3
Transcript of Let's discover React and Redux with TypeScript
![Page 1: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/1.jpg)
REACT AND REDUXLET'S DISCOVER…
Mathieu Savy | @mrblackus
![Page 2: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/2.jpg)
LET'S DISCOVER REACT AND REDUX
WHAT IS REACT?
▸ JS library to build User Interface (UI)
▸ Everything is Component
▸ Unidirectional data-flow (from parent to child)
▸ Virtual DOM
▸ NO MORE! (no controller, no router, no filter, etc.)
![Page 3: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/3.jpg)
LET'S DISCOVER REACT AND REDUX
![Page 4: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/4.jpg)
LET'S DISCOVER REACT AND REDUX
AppComponent
![Page 5: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/5.jpg)
LET'S DISCOVER REACT AND REDUX
AppComponent
SearchBarComponent
![Page 6: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/6.jpg)
LET'S DISCOVER REACT AND REDUX
AppComponent
SearchBarComponent
SortBarComponent
![Page 7: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/7.jpg)
LET'S DISCOVER REACT AND REDUX
AppComponent
QuestionListComponent
SearchBarComponent
SortBarComponent
![Page 8: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/8.jpg)
LET'S DISCOVER REACT AND REDUX
AppComponent
QuestionListComponent
QuestionComponent
SearchBarComponent
SortBarComponent
![Page 9: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/9.jpg)
LET'S DISCOVER REACT AND REDUX
AppComponent
QuestionListComponent
QuestionComponentLabelComponent
BadgeComponent
SearchBarComponent
SortBarComponent
![Page 10: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/10.jpg)
LET'S DISCOVER REACT AND REDUX
COMPONENT
![Page 11: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/11.jpg)
LET'S DISCOVER REACT AND REDUX
I'm pretty sure you can't do that.
COMPONENT
![Page 12: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/12.jpg)
LET'S DISCOVER REACT AND REDUX
Anyway, you shouldn't. Separation of concerns, MVC, bla bla bla… 🤓
COMPONENT
![Page 13: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/13.jpg)
LET'S DISCOVER REACT AND REDUX
And that?!Anyway, you shouldn't. Separation of concerns, MVC, bla bla bla…
COMPONENT
![Page 14: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/14.jpg)
LET'S DISCOVER REACT AND REDUX
PROPERTIES
▸ Used to pass values from a parent component to a child component
▸ Like HTML attributes
▸ Immutable values (can't be used to pass data from child to parent)
Will display : "Hey! Hello Mathieu!"
![Page 15: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/15.jpg)
LET'S DISCOVER REACT AND REDUX
STATE
▸ Represent the internal state of a component
▸ State can be modified
▸ Must have an initial value
▸ Component is re-rendered if the state is modified
![Page 16: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/16.jpg)
LET'S DISCOVER REACT AND REDUX
STATE
![Page 17: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/17.jpg)
LET'S DISCOVER REACT AND REDUX
STATE
And if I want to choose my initial state at runtime?
🤔
![Page 18: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/18.jpg)
LET'S DISCOVER REACT AND REDUX
STATE
Use props!
😃
![Page 19: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/19.jpg)
LET'S DISCOVER REACT AND REDUX
LET'S TYPE CHECK OUR COUNTER
▸ We use TypeScript for type checking, so let's be sure our number is a number (who knows…)
▸ Remember the <any, any> part of React.Component?
![Page 20: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/20.jpg)
LET'S DISCOVER REACT AND REDUX
LET'S TYPE CHECK OUR COUNTER
Now, you can try to put something else than a number on our counter, it won't work
![Page 21: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/21.jpg)
LET'S DISCOVER REACT AND REDUX
LET'S TYPE CHECK OUR COUNTER
![Page 22: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/22.jpg)
LET'S DISCOVER REACT AND REDUX
LET'S TYPE CHECK OUR COUNTER
🕵
![Page 23: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/23.jpg)
LET'S DISCOVER REACT AND REDUX
Type checking = peace of mind
![Page 24: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/24.jpg)
LET'S DISCOVER REACT AND REDUX
DATA FLOW
▸ Data flows from parent to children components
▸ To pass values to a child, we use props
▸ There only is a one way data-binding
![Page 25: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/25.jpg)
Parent -> child communication with property
![Page 26: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/26.jpg)
LET'S DISCOVER REACT AND REDUX
DATA FLOW
🤔But now, I want to mark an item as "done" when I click on it. Props are immutable, so I can't do this.props.item.done = true;
How can I warn the parent to mark my item as "done" ?
❌
![Page 27: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/27.jpg)
LET'S DISCOVER REACT AND REDUX
DATA FLOW
🤔But now, I want to mark an item as "done" when I click on it. Props are immutable, so I can't do this.props.item.done = true;
How can I warn the parent to mark my item as "done" ?
EVENTSData flows down, events flow up
![Page 28: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/28.jpg)
LET'S DISCOVER REACT AND REDUX
DATA FLOW
1.On TodoList component, define an action we want to execute when clicking on a TodoItem
2.Pass this action as a prop to every TodoItem
3.When click is triggered on TodoItem, call the action that was passed as prop
![Page 29: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/29.jpg)
LET'S DISCOVER REACT AND REDUX
DATA FLOW
1.On TodoList component, define an action we want to execute when clicking on a TodoItem
2.Pass this action as a prop to every TodoItem
3.When click is triggered on TodoItem, call the action that was passed as prop
DELEGATION
![Page 30: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/30.jpg)
![Page 31: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/31.jpg)
Data
![Page 32: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/32.jpg)
Data Events
![Page 33: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/33.jpg)
LET'S DISCOVER REACT AND REDUX
VIRTUAL DOM
▸ DOM manipulations are (very) slow
▸ Use of Virtual DOM allows us to re-render the DOM only when necessary
▸ Re-render only needed subtrees (diff between old state and new state)
▸ Allow server-side rendering
▸ => Better performance
![Page 34: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/34.jpg)
LET'S DISCOVER REACT AND REDUX
VIRTUAL DOM
Credit: http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html
![Page 35: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/35.jpg)
LET'S DISCOVER REACT AND REDUX
VIRTUAL DOM
Credit: http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html
![Page 36: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/36.jpg)
LET'S DISCOVER REACT AND REDUX
OKAY, THAT SEEMS COOL. BUT WHY?
▸ UI became predictable and deterministic
▸ Predictable => easier to understand and test
▸ Components are reusable and more maintainable
▸ Use of virtual DOM allows very good performances
![Page 37: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/37.jpg)
LET'S DISCOVER REACT AND REDUX
Hey, it's okay for a todo-list. But what about a real application?
![Page 38: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/38.jpg)
LET'S DISCOVER REACT AND REDUX
Hey, it's okay for a todo-list. But what about a real application?
Server response
![Page 39: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/39.jpg)
LET'S DISCOVER REACT AND REDUX
Hey, it's okay for a todo-list. But what about a real application?
Server response
Cached data
![Page 40: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/40.jpg)
LET'S DISCOVER REACT AND REDUX
Hey, it's okay for a todo-list. But what about a real application?
Server response
Cached data
Temporary form data
![Page 41: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/41.jpg)
LET'S DISCOVER REACT AND REDUX
Hey, it's okay for a todo-list. But what about a real application?
Server response
Cached dataUI state
Temporary form data
![Page 42: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/42.jpg)
LET'S DISCOVER REACT AND REDUX
Hey, it's okay for a todo-list. But what about a real application?
Server response
Cached dataUI state
Temporary form data
Loader during async tasks
![Page 43: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/43.jpg)
LET'S DISCOVER REACT AND REDUX
Hey, it's okay for a todo-list. But what about a real application?
Server response
Cached dataUI state
Temporary form data
Loader during async tasks
Error message
![Page 44: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/44.jpg)
LET'S DISCOVER REACT AND REDUX
State management is going to be a nightmare!
![Page 45: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/45.jpg)
LET'S DISCOVER REACT AND REDUX
State management is going to be a nightmare!
😈
![Page 46: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/46.jpg)
LET'S DISCOVER REACT AND REDUX
Flux Relay Redux
to the rescue
![Page 47: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/47.jpg)
LET'S DISCOVER REACT AND REDUX
WHAT IS REDUX?
"Redux is a predictable state container for JavaScript apps."http://redux.js.org
![Page 48: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/48.jpg)
LET'S DISCOVER REACT AND REDUX
WHAT IS REDUX?
State container?
There is one unique state container called store. It contains your application state.
Same store = same application render
![Page 49: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/49.jpg)
LET'S DISCOVER REACT AND REDUX
WHAT IS REDUX?
Predictable?
State is immutable
We can get a new state by dispatching actions
![Page 50: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/50.jpg)
LET'S DISCOVER REACT AND REDUX
WHAT IS REDUX?
Predictable?
State is immutable
We can get a new state by dispatching actions
"Mark item 3 as read"{ type: "MARK_READ", itemId: 3 }
=>
![Page 51: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/51.jpg)
LET'S DISCOVER REACT AND REDUX
WHAT IS REDUX?
Predictable?
Actions are consumed by reducers
Reducers take an action, the actual state and return a new state
function reducer(state, action) => newState
![Page 52: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/52.jpg)
LET'S DISCOVER REACT AND REDUX
WHAT IS REDUX?
Predictable?
Reducers are pure functions.
Same parameters = same result. Always.
![Page 53: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/53.jpg)
LET'S DISCOVER REACT AND REDUX
A LITTLE EXAMPLE?
Let's build a counter (yeah, again)!
▸ We have two actions: increment and decrement
▸ If another (or an unknown) action is passed, do nothing (i.e. return the current state)
![Page 54: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/54.jpg)
LET'S DISCOVER REACT AND REDUX
A LITTLE EXAMPLE?
The reducer
![Page 55: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/55.jpg)
LET'S DISCOVER REACT AND REDUX
A LITTLE EXAMPLE?
The reducer
🤔Hum, on the first call, state will be undefined, isn't it?
![Page 56: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/56.jpg)
LET'S DISCOVER REACT AND REDUX
A LITTLE EXAMPLE?
The reducer
ES6 default values to the rescue!This is the way to define our app initial state.
![Page 57: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/57.jpg)
LET'S DISCOVER REACT AND REDUX
A LITTLE EXAMPLE?
The store
We create the store by passing our reducer to Redux createStore() function
![Page 58: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/58.jpg)
LET'S DISCOVER REACT AND REDUX
A LITTLE EXAMPLE?
And we are done!
Yep, Redux is that simple. If you got this, you understood all the basics of Redux.
![Page 59: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/59.jpg)
LET'S DISCOVER REACT AND REDUX
A LITTLE EXAMPLE?
Hey, don't trick me!There's not a single line of React in your example.
😐
![Page 60: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/60.jpg)
LET'S DISCOVER REACT AND REDUX
REDUX × REACT
▸ Use react-redux package
▸ Relies on presentational and container components
![Page 61: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/61.jpg)
LET'S DISCOVER REACT AND REDUX
REDUX × REACT: PRESENTATIO-WHAT?
Credit: http://redux.js.org/docs/basics/UsageWithReact.html
![Page 62: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/62.jpg)
LET'S DISCOVER REACT AND REDUX
REDUX × REACT: PRESENTATIONAL COMPONENTS
▸ Data from props
▸ Invoke callbacks (from props) to change data — Delegation
▸ Rarely have a state (in such case, just UI state, no data)
![Page 63: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/63.jpg)
LET'S DISCOVER REACT AND REDUX
REDUX × REACT: CONTAINER COMPONENTS
▸ Are generated (by react-redux) to work with a presentational component
▸ Generated from two functions that describes how to:
▸ map the state to child component props
▸ map dispatch calls to child components props
▸ Need Redux store passed as property
![Page 64: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/64.jpg)
LET'S DISCOVER REACT AND REDUX
REDUX × REACT: CONTAINER COMPONENTS
![Page 65: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/65.jpg)
LET'S DISCOVER REACT AND REDUX
REDUX × REACT: CONTAINER COMPONENTS
Presentational Component
![Page 66: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/66.jpg)
LET'S DISCOVER REACT AND REDUX
REDUX × REACT: CONTAINER COMPONENTS
Presentational Component
Counter component will have count and onIncrement properties
![Page 67: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/67.jpg)
LET'S DISCOVER REACT AND REDUX
REDUX × REACT: CONTAINER COMPONENTS
Presentational Component
Counter component will have count and onIncrement properties
Redux Store
![Page 68: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/68.jpg)
LET'S DISCOVER REACT AND REDUX
REDUX × REACT: CONTAINER COMPONENTS
Passing store to every container components will rapidly become impossible to handle properly.
That's why react-redux exposes a Provider component that handles it for us.
![Page 69: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/69.jpg)
LET'S DISCOVER REACT AND REDUX
A LITTLE MORE: ASYNC
Once again, that's cool for a todo-list, but what about async calls with Redux?
▸ See redux-thunk middleware
▸ Notion of async action, that dispatches actions (request start, request end, etc.)
More: http://redux.js.org/docs/advanced/AsyncActions.html
![Page 70: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/70.jpg)
LET'S DISCOVER REACT AND REDUX
RESOURCES
▸ React doc: https://facebook.github.io/react/
▸ Holy Redux Bible: http://redux.js.org/index.html
![Page 71: Let's discover React and Redux with TypeScript](https://reader031.fdocuments.in/reader031/viewer/2022021416/58abffa21a28abb6718b557f/html5/thumbnails/71.jpg)
Thanks for listening!
Questions?