Let's discover React and Redux with TypeScript

REACT AND REDUX
LET'S DISCOVER…
Mathieu Savy | @mrblackus

LET'S DISCOVER REACT AND REDUX
WHAT IS REACT?
▸ JS library to build User Interface (UI)
▸ Everything is Component
▸ Unidirectional data-ﬂow (from parent to child)
▸ Virtual DOM
▸ NO MORE! (no controller, no router, no ﬁlter, etc.)

AppComponent

AppComponent
SearchBarComponent

AppComponent
SearchBarComponent
SortBarComponent

AppComponent
QuestionListComponent
SearchBarComponent
SortBarComponent

AppComponent
QuestionComponent
SearchBarComponent
SortBarComponent

AppComponent
QuestionComponent
LabelComponent
BadgeComponent
SearchBarComponent
SortBarComponent

COMPONENT

I'm pretty sure you can't do that.
COMPONENT

Anyway, you shouldn't.
Separation of concerns,
MVC, bla bla bla… 🤓
COMPONENT

And that?!
Anyway, you shouldn't.
Separation of concerns,
MVC, bla bla bla…
COMPONENT

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!"

STATE
▸ Represent the internal state of a component
▸ State can be modiﬁed
▸ Must have an initial value
▸ Component is re-rendered if the state is modiﬁed

STATE

STATE
And if I want to choose
my initial state at
runtime?
🤔

STATE
Use props!
😃

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?

Now, you can try to put
something else than a
number on our counter, it
won't work

🕵

Type checking = peace of mind

DATA FLOW
▸ Data ﬂows from parent to children components
▸ To pass values to a child, we use props
▸ There only is a one way data-binding

Parent -> child
communication with property

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" ?
❌

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" ?
EVENTS
Data ﬂows down, events ﬂow up

DATA FLOW
1.On TodoList component, deﬁne 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

DATA FLOW
1.On TodoList component, deﬁne 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

Let's discover React and Redux with TypeScript

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

VIRTUAL DOM
Credit: http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html

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

Hey, it's okay for a todo-list. But what about a real application?

Server response

Server response
Cached data

Server response
Cached data
Temporary form data

Server response
Cached dataUI state
Temporary form data

Server response
Cached dataUI state
Temporary form data
Loader during async tasks

Server response
Cached dataUI state
Temporary form data
Loader during async tasks
Error message

State management is going to be a nightmare!

State management is going to be a nightmare!
😈

Flux Relay Redux
to the rescue

WHAT IS REDUX?
"Redux is a predictable state container for JavaScript apps."
http://redux.js.org

WHAT IS REDUX?
State container?
There is one unique state container called store. It contains your application state.
Same store = same application render

WHAT IS REDUX?
Predictable?
State is immutable
We can get a new state by dispatching actions

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 
}
=>

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

WHAT IS REDUX?
Predictable?
Reducers are pure functions.
Same parameters = same result. Always.

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)

A LITTLE EXAMPLE?
The reducer

A LITTLE EXAMPLE?
The reducer
🤔
Hum, on the ﬁrst call, state will
be undeﬁned, isn't it?

A LITTLE EXAMPLE?
The reducer
ES6 default values to the rescue! 
This is the way to deﬁne our app
initial state.

A LITTLE EXAMPLE?
The store
We create the store by passing our reducer to Redux createStore() function

A LITTLE EXAMPLE?
And we are done!
Yep, Redux is that simple. If you got this, you understood all the basics of Redux.

A LITTLE EXAMPLE?
Hey, don't trick me! 
There's not a single line of React in your example.
😐

REDUX × REACT
▸ Use react-redux package
▸ Relies on presentational and container components

REDUX × REACT: PRESENTATIO-WHAT?
Credit: http://redux.js.org/docs/basics/UsageWithReact.html

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)

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

Presentational Component

Counter component will have
count and onIncrement
properties

Counter component will have
count and onIncrement
properties
Redux Store

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.

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

RESOURCES
▸ React doc: https://facebook.github.io/react/
▸ Holy Redux Bible: http://redux.js.org/index.html

Thanks for listening!
Questions?

Let's discover React and Redux with TypeScript

More Related Content

What's hot (20)

Similar to Let's discover React and Redux with TypeScript (20)

Recently uploaded (20)

Let's discover React and Redux with TypeScript