better react state management with redux

Better React state management with ReduxMaurice de Beijer@mauricedb@react_tutorial

© ABL - The Problem Solver 2

Workshop goal

Short recap: what is React? Learn the three principals of Redux Use the different Redux components Unit testing Redux code Adding Redux to a React application Use Redux middleware

3

Maurice de Beijer The Problem Solver Microsoft Azure MVP Freelance developer/instructor Twitter: @mauricedb and @React_Tutorial Web: http://www.TheProblemSolver.nl E-mail: maurice.de.beijer@gmail.com

© ABL - The Problem Solver 4

Follow along

Git repository: https://github.com/mauricedb/nitflex-redux

Slides: http://bit.ly/react-redux-workshop

© ABL - The Problem Solver 5

Type it outby hand?

“Typing it drills it into your brain much better than

simply copying and pasting it. You're forming new neuron pathways. Those pathways are going to help you in the future. Help them out now!”

© ABL - The Problem Solver 6

PrerequisitesInstall Node & NPM

© ABL - The Problem Solver 7

Install Node.js &

NPM

© ABL - The Problem Solver 8

Short recapWhat is React?

© ABL - The Problem Solver 9

React“React is a JavaScript library for building user interfaces”

- Facebook -

© ABL - The Problem Solver 10

React features

React uses a component based architecture

Components are written using the JSX syntax

React likes a one way data flow React uses a virtual DOM

© ABL - The Problem Solver 11

React Componen

t

© ABL - The Problem Solver 12

NitflexThe sample application

© ABL - The Problem Solver 13

Nitflex

© ABL - The Problem Solver 14

Main componen

ts

Application

Login Main Page

Header Billboard Genre List

Genre*

Movie* Expanded Movie

Playing Movie

© ABL - The Problem Solver 15

Stateful componen

ts

Application

Login Main Page

Header Billboard Genre List

Genre*

Movie* Expanded Movie

Playing Movie

© ABL - The Problem Solver 16

Clone Nitflex

&NPM install

© ABL - The Problem Solver 17

Redux

© ABL - The Problem Solver 18

Redux

“Redux is a predictable state container for JavaScript

apps”

- Dan Abramov -

© ABL - The Problem Solver 19

Three principals of Redux

Single source of truth State is read-only Changes are made with pure functions

© ABL - The Problem Solver 20

Single source of

truth

The application state is stored in a single location

Do not scatter the state over lots of components

A single state location makes it easier to reason about and debug your application

© ABL - The Problem Solver 21

State isread-only

The state objects are never changed by the application

Every state change is the result of an action being dispatched to the store

This action describes the intended state change

© ABL - The Problem Solver 22

Changes with pure functions

Reducers are pure functions that take the current state and an action as input and return a new state object

The previous state object is never modified

© ABL - The Problem Solver 23

UI versus App state

Redux should be used for application state.

Do not store UI state in Redux!

© ABL - The Problem Solver 24

Login example

© ABL - The Problem Solver 25

InstallingRedux

© ABL - The Problem Solver 26

Redux Components

© ABL - The Problem Solver 27

Redux Componen

ts

Actions Reducers The store

© ABL - The Problem Solver 28

Loginaction

© ABL - The Problem Solver 29

Login reducer

© ABL - The Problem Solver 30

combineReducers

© ABL - The Problem Solver 31

Unit testing

© ABL - The Problem Solver 32

Unit test the action

creator

© ABL - The Problem Solver 33

Unit test the

reducer

© ABL - The Problem Solver 34

Redux and React

© ABL - The Problem Solver 35

Redux and React

The NPM react-redux package contains the React bindings for Redux

The <Provider> component makes the Redux store available

The connect() function connects React components to the Redux store use in <Provider>

© ABL - The Problem Solver 36

Create store

© ABL - The Problem Solver 37

Dispatch login

action

© ABL - The Problem Solver 38

Get the user from the store

© ABL - The Problem Solver 39

Cleanup app-container.jsx

Remove user and loginAsUser() app-presentation.jsx

Remove loginAsUser()

© ABL - The Problem Solver 40

Redux Middleware

© ABL - The Problem Solver 41

Redux Middlewar

e

“Redux middleware provides a third-party extension point

between dispatching an action, and the moment it

reaches the reducer”

- Dan Abramov -

© ABL - The Problem Solver 42

Installing redux-thunk

© ABL - The Problem Solver 43

Redux-Thunk

© ABL - The Problem Solver 44

What is a Thunk?

“A thunk is a subroutine that is created, often

automatically, to assist a call to another subroutine”

- Wikipedia -

© ABL - The Problem Solver 45

Configure Thunk

Middleware

© ABL - The Problem Solver 46

Update the

Actions

© ABL - The Problem Solver 47

Add movies reducer

© ABL - The Problem Solver 48

Update the

reducers index.js

© ABL - The Problem Solver 49

Extract movies from store

© ABL - The Problem Solver 50

Cleanup app-container.jsx

Remove allMovies and passing movies to AppPresentation

© ABL - The Problem Solver 51

Redux DevTools

© ABL - The Problem Solver 52

Redux DevTools

© ABL - The Problem Solver 53

Redux DevTools

© ABL - The Problem Solver 54

Remember the user

© ABL - The Problem Solver 55

Remember the user

© ABL - The Problem Solver 56

Playing and stopping movies

© ABL - The Problem Solver 57

Add actions

© ABL - The Problem Solver 58

Update reducer

© ABL - The Problem Solver 59

Startplaying

© ABL - The Problem Solver 60

Retrieve the

playing movie

from the store in

app-presentati

on

© ABL - The Problem Solver 61

Retrieve the

playing movie

from the store in playing-movie

© ABL - The Problem Solver 62

Cleanup app-container.jsx main-page/index.jsx genre-list.jsx genre-row.jsx

© ABL - The Problem Solver 63

Filtering movies

© ABL - The Problem Solver 64

Filtering movies

The list of filtered movies are derived from state

© ABL - The Problem Solver 65

Add action

© ABL - The Problem Solver 66

Reducer

© ABL - The Problem Solver 67

Filter-movies.jsx

© ABL - The Problem Solver 68

App-presentati

on.jsx

© ABL - The Problem Solver 69

Cleanup Header.jsx

Remove filterMovies Main-page/index.jsx

Remove filterMovies

© ABL - The Problem Solver 70

Removeapp-container

The AppContainer is no longer needed.

© ABL - The Problem Solver 71

Index.js

© ABL - The Problem Solver 72

Connect only to required movie data

© ABL - The Problem Solver 73

Main-page

© ABL - The Problem Solver 74

Genre-list

© ABL - The Problem Solver 75

Billboard

© ABL - The Problem Solver 76

App-presentatio

n

© ABL - The Problem Solver 77

Bonus Exercises

Extract updating localStorage from user reducer and do this with middleware

The user is passed from AppPresentation => MainPage => Header

© ABL - The Problem Solver 78

Maurice de Beijer

@mauricedb

maurice.de.beijer@gmail.com