Redux for ReactJS Programmers

Redux for ReactJs
Programmers
by Dr. David Rodenas

http://heim.iﬁ.uio.no/~trygver/themes/mvc/mvc-index.html

Route: /users/123/edit
or Route: /floors/3/rooms/5
or Route: /admin
Users:
{id: 123, name: 'bob', ...}
{id: 124, name: 'alice', ...}
Thermostats:
{floor: 3, room: 5, max: 26, min: 18, ...},
Preferences:
dateFormat: 'dd-mm-yyyy'
heater: 'on'
cooler: 'off'
6

Route: /users/123/edit
Users:
{id: 123, name: 'bob', ...}
{id: 124, name: 'alice', ...}
Thermostats:
Preferences:
dateFormat: 'dd-mm-yyyy'
heater: 'on'
cooler: 'off'
7
https://martinfowler.com/eaaDev/uiArchs.html
three kind of states:
· record state
· session state
· screen state
{

M
V
C
widgets
React
+ state
handlers

MVC
MVP
MVVC
MVVM
MV*
Two key beneﬁts of MV* are:
• "attach multiple views to a model to provide
different presentations"
• "change the way a view responds to user input
without changing its visual presentation"

“MVC works pretty well
for small applications…
but it doesn’t make room
for new features.”
“Flux is a single direction data flow,
that avoids all the arrows
going on all directions
what makes really
hard to understand the system.”
https://youtu.be/nYkdrAPrdcw?t=10m20s

https://www.youtube.com/watch?v=-jwQ3sGoiXg

Flux
21
https://facebook.github.io/ﬂux/
1 * *
*

Flux
// dispatcher.js
const AppDispatcher = new Dispatcher();
export default AppDispatcher;
// Dispatcher API
// AppDispatcher.register(function(action) { ... });
// AppDispatcher.dispatch(action);
22
1

Flux
// stores/todos.js
const _todos = [];
const TodoStore = {...EventEmitter.prototype, {
getAll() {
return _todos;
},
});
AppDispatcher.register(function(action) {
...
TodoStore.emit('change');
});
export default TodoStore;
23
*

Flux
// components/TodoList.js
class TodoList extends React.Component {
constructor() { ... }
componentDidMount() {
TodoStore.addListener('change', this.updateState);
}
componentWillUnmount() {
TodoStore.removeListener('change', this.updateState);
}
updateState = () => {
this.setState({todos: TodoStore.getAll()});
}
render() { ... }
}
24
*

Flux
// components/AddTodo.js
class AddTodo extends React.Component {
constructor() { ... }
handleClick = () => {
AppDispatcher.dispatch({
type: 'ADD_TODO',
text: this.state.value,
});
}
render() { ... }
}
25
*

27
https://www.youtube.com/watch?v=xsSnOQynTHs

Inspired in Flux
• Like Flux:
• Single direction data-ﬂow
• Has actions
• Actions are dispatched
• Has stores concept
• Views subscribes to stores
28

Inspired in Flux
• Unlike Flux:
• One single store
> Single source of truth
• No dispatcher (dispatch by Store)
• State is computed with reducers
> State is read-only
> Changes are pure functions
• State is injected to views
29

Flux to Redux
const _todos = [];
getAll() {
return _todos;
},
});
switch (action.type) {
case ActionTypes.TODO_CREATE:
let text = action.text.trim();
_todos.push(text);
}
});
30

Flux to Redux
const _todos = [];
getAll() {
return _todos;
},
});
_todos.push(text);
}
});
31

Flux to Redux
const _todos = [];
getAll() {
return _todos;
},
});
export function handle(action) {
_todos.push(text);
}
});
32

Flux to Redux
const _todos = [];
getAll() {
return _todos;
},
});
_todos.push(text);
}
});
33

Flux to Redux
let _todos = [];
getAll() {
return _todos;
},
});
_todos = [..._todos, text];
}
});
34

Flux to Redux
let _todos = [];
getAll() {
return _todos;
},
});
}
});
35

Flux to Redux
let _todos = [];
const TodoStore = new EventEmitter();
export function getState() {
return _todos;
}
}
});
36

Flux to Redux
let _todos = [];
const TodoStore = new EventEmitter();
return _todos;
}
}
});
37

Flux to Redux
let _todos = [];
return _todos;
}
}
});
38

Flux to Redux
let _todos = [];
return _todos;
}
}
});
39

Flux to Redux
let _todos = [];
}
return _todos;
});
40

Flux to Redux
let _todos = [];
}
return _todos;
});
41

Flux to Redux
export function handle(_todos, action) {
}
return _todos;
});
42

Flux to Redux
export function handle(_todos, action) {
}
return _todos;
});
43

Flux to Redux
export function handle(state, action) {
state = [...state, text];
}
return state;
});
44

Flux to Redux
state = [...state, text];
}
return state;
});
45

Flux to Redux
return [...state, text];
default:
return state;
}
});
46

Flux to Redux
export function handle(state = [], action) {
return [..._todos, text];
default:
return state;
}
});
47

Actions
// actions are identified by type
const ADD_TODO = 'ADD_TODO'
// actions are always a JSON equivalent object
const exampleOfAction = {
type: ADD_TODO,
text: 'Learn Redux',
};
// we use function creators for actions
export function addTodo(text) {
return {type: ADD_TODO, text};
};
50
http://redux.js.org/docs/basics/Actions.html#source-code

State
// state is one single JSON object
{
visibilityFilter: 'SHOW_ALL',
todos: [
{
id: 123,
text: 'Learn Redux',
completed: false,
},
],
}
// state should be normalized (use pk/fk)
52

Compute Action
// execute an action is like:
(previousState, action) => newState
54

Compute Action
const reducer = (previousState, action) => newState
55

Compute Action
const actions = [
addTodo('buy redux book'),
addTodo('read redux book'),
toggleTodo(3),
setVisibilityFilter(SHOW_ACTIVE),
...
];
56

Compute Action
const actions = [
toggleTodo(3),
...
];
const finalAppState = actions.reduce(reducer);
57

Reducer
const reducer = (state, action) => {
case SET_VISIBILITY_FILTER:
return {
...state,
visibilityFilter: action.filter,
};
}
};
58

Reducer
return {
...state,
visibilityFilter: action.filter,
};
default:
return state;
}
};
59

Reducer
case SET_VISIBILITY_FILTER: ...
case ADD_TODO:
return {
...state,
todos: [
...state.todos,
{ text: action.text, completed: false },
],
};
default:
return state;
}
};
60

Reducer
case ADD_TODO: ...
case TOGGLE_TODO:
return {
...state,
todos: state.todos.map((todo, index) => {
if (index === action.index) {
return {...todo, completed: !todo.completed};
}
return todo;
},
};
default: ...
}
};
61

Initial State
const actions = [
toggleTodo(3),
...
];
const finalAppState = actions.reduce(reducer);
62
Something is missing: https://developer.mozilla.org/en-US/docs/Web/
JavaScript/Reference/Global_Objects/Array/Reduce#Syntax

Initial State
const actions = [ ... ];
const initialState = {
visibilityFilter: SHOW_ALL,
todos: [],
};
const finalAppState =
actions.reduce(reducer, initialState);
63

Initial State
const actions = [ ... ];
const initialState = {
visibilityFilter: SHOW_ALL,
todos: [],
};
const finalAppState =
actions.reduce(reducer, undefined);
64

Reducers
const initialState = { ... };
if (state === undefined) {
state = initialState;
}
case ADD_TODO: ...
case TOGGLE_TODO: ...
default: ...
}
};
65

Reducers
const reducer = (state = initialState, action) => {
case ADD_TODO: ...
default: ...
}
};
66

Splitting Reducers
case ADD_TODO: ...
default: ...
}
};
67

Splitting Reducers
const todos = (state, action) => {
case ADD_TODO: ...
default: ...
}
};
const visibilityFilter = (state, action) => {
default: ...
}
};
68

Splitting Reducers
state = visibilityFilter(state, action);
state = todos(state, action);
return state;
};
69

Splitting Reducers
return {
visibilityFilter: visibilityFilter(
state.visibilityFilter, action),
todos: todos(state.todos, action)
};
};
70

Splitting Reducers
const reducer = (state = {}, action) => {
return {
};
};
71

Splitting Reducers
const visibilityFilter = (state = SHOW_ALL, action) =>
{
return action.filter;
default:
return state;
}
};
72

Splitting Reducers
const todos = (state = [], action) => {
case ADD_TODO:
return [
...state,
{ text: action.text, completed: false }
];
case TOGGLE_TODO:
return state.map((todo, index) => {
if (index === action.index) {
return {...todo, completed: !todo.completed};
}
return todo;
}
default:
return state;
}
};
73

Combine Reducers
const todoApp = (state = {}, action) => {
return {
};
};
74

Combine Reducers
const todoApp = (state = {}, action) => {
// Wrong!: creates new object even if nothing changes
return {
};
};
75

Combine Reducers
import { combineReducers } from 'redux';
const todoApp = combineReducers({
visibilityFilter,
todos
});
76
http://redux.js.org/docs/basics/Reducers.html#source-code

Store
import { createStore } from 'redux';
const store = createStore(reducer/*, initialState?*/);
// store.getState(): state
// store.dispatch(action)
// store.subscribe(listener): unsubscribeFn
78
http://redux.js.org/docs/basics/Store.html

Dispatching actions
// Do you remember?
const actions = [
toggleTodo(3),
...
];
79

Dispatching actions
// Using the store:
store.dispatch(addTodo('buy redux book'));
store.dispatch(addTodo('read redux book'));
store.dispatch(toggleTodo(3));
store.dispatch(setVisibilityFilter(SHOW_ACTIVE));
80

Bindings
$ npm install --save react-redux
82
http://redux.js.org/docs/basics/UsageWithReact.html

Presentational vs Container
83
Presentational Container
Purpose
How to render things
(html + css)
How things work
(fetch data, updates, ...)
Aware of Redux No Yes
To read data Read data from props Subscribe to Redux state
To change data Invoke callbacks from props Dispatch Redux actions
Written by hand usually by react-redux

Application
• Stores, reducers and actions are pure Redux
• Presentational components are pure React
• You may design them ﬁrst
• Container components are the glue
• Design which data needs and which actions performs
• Decide which presentational components wrap
84

Presentational Component
function Toggle(props) {
return (
<span onClick={props.onToggle}>
{props.toggle ? 'on' : 'off'}
</span>
);
}
85

Container Component
const mapStateToProps = (state) => ({
toggle: state,
});
const mapDispatchToProps = (dispatch, ownProps) => ({
onToggle: () => dispatch(toggle()),
});
const ToggleContainer = ReactRedux.connect(
mapStateToProps,
mapDispatchToProps
)(Toggle);
86

Providing the Store
import { Provider } from 'react-redux';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
87

Middleware
• What if we want log all actions?
• Log previous state
• Log dispatched action
• Log resulting state
89

Middleware
let action = addTodo('Use Redux')
console.log('dispatching', action)
store.dispatch(action)
console.log('next state', store.getState())
90

Middleware
function dispatchAndLog(store, action) {
console.log('dispatching', action)
store.dispatch(action)
console.log('next state', store.getState())
}
dispatchAndLog(store, addTodo('Use Redux'))
91

Middleware
• What if we also want save change states?
• What if we also want report crashes?
• What if we also want to time travel?
92

Middleware
const logger = (store) => (next) => (action) => {
console.log('dispatching', action);
let result = next(action);
console.log('next state', store.getState());
return result;
}
const stateSaver = (store) => (next) => (action) => ...;
const crashReporter = (store) => (next) => (action) => ...;
const timeTraveler = (store) => (next) => (action) => ...;
93

Middleware
const next4 = store.dispatch;
const next3 = logger(store)(next4);
const next2 = stateSaver(store)(next3);
const next1 = crashReporter(store)(next2);
const next0 = timeTraveler(store)(next1);
next0(addTodo('Use Redux'))
94

Middleware
const middlewares = [
logger, // 3
stateSaver, // 2
crashReporter, // 1
timeTraveler, // 0
];
const next = (action) => middlewares.reduce(
(next, middleware) => middleware(store)(next)
, store.dispatch);
next(addTodo('Use Redux'));
95

Middleware
const middlewares = [
timeTraveler, // 0
crashReporter, // 1
stateSaver, // 2
logger, // 3
];
const next = (action) => middlewares.reduceRight(
(next, middleware) => middleware(store)(next)
, store.dispatch);
next(addTodo('Use Redux'));
96

Compose
const greet = (x) => `Hello, ${x}.`;
const emote = (x) => `${x} :)`;
const compose = function(f, g) {
return function(x) {
return f(g(x));
}
}
let happyGreeting = compose(greet, emote);
// happyGreeting("Bob") -> Hello, Bob :).
97

Enhancer
import { applyMiddleware, createStore } from 'redux';
const store = createStore(
todoApp,
/* initialState, */
applyMiddleware(
timeTraveler, // 0
crashReporter, // 1
stateSaver, // 2
logger, // 3
)
);
98

Asynchronous
const PING = 'PING';
const PONG = 'PONG';
const ping = () => ({ type: PING });
const pong = () => ({ type: PONG });
export function pingPong() {
// first ping(), then 1 sec later, pong()
}
100

Asynchronous
export function pingPong() {
setTimeout(() => dispatch(pong()), 1000);
return ping();
}
101

Asynchronous
function pingPong() {
return (dispatch) => {
return ping();
};
}
103

Recap
const middleware = (store) => (next) => (action) => {
return next(action);
};
104

"Inject" dispatch
const middleware = (store) => (next) => (action) => {
if (typeof action === 'function') {
return action(
store.dispatch,
store.getState
);
}
};
105

Redux-thunk
const thunkMiddleware = (store) => (next) => (action) => {
return action(
store.dispatch,
store.getState
);
}
};
106

Asynchronous
dispatch(ping());
};
}
108

Asynchronous
dispatch(ping());
};
}
109

Asynchronous
return async (dispatch) => {
dispatch(ping());
await delay(1000);
dispatch(pong());
};
}
110

Redux-thunk
const asyncThunkMiddleware =
(store) => (next) => async (action) =>
{
return await action(
store.dispatch,
store.getState,
);
}
};
111

Others
• https://redux-saga.js.org/
• https://redux-observable.js.org/
113

Actions
{ type: 'FETCH_POSTS' }
{
type: 'FETCH_POSTS',
status: 'error',
error: 'Ops'
}
{
type: 'FETCH_POSTS',
status: 'success',
response: { ... }
}
115

Actions
{ type: 'FETCH_POSTS_REQUEST' }
{
type: 'FETCH_POSTS_FAILURE',
error: 'Ops'
}
{
type: 'FETCH_POSTS_SUCCESS',
response: { ... }
}
116

Actions
const requestPosts = () => ({
type: 'FETCH_POSTS_REQUEST'
});
const requestPostsFailure = (error) => ({
error
});
const receivePosts = (response) => ({
response
});
117

Actions
const fetchPostsRequest = () => ({
type: 'FETCH_POSTS_REQUEST'
});
const fetchPostsFailure = (error) => ({
error
});
const fetchPostsSuccess = (response) => ({
response
});
118

Async Action
const fetchPosts => () => async (dispatch) => {
dispatch(fetchPostsRequest());
try {
const response = await apiGet('/posts');
dispatch(fetchPostsSuccess(response));
} catch (error) {
dispatch(fetchPostsFailure(error));
}
}
119

Normalized Data
http://redux.js.org/docs/recipes/reducers/NormalizingStateShape.html
http://redux.js.org/docs/recipes/reducers/UpdatingNormalizedData.html

Data Example
{
"id": "123",
"author": {
"id": "1",
"name": "Paul"
},
"title": "My awesome blog post",
"comments": [
{
"id": "324",
"commenter": {
"id": "2",
"name": "Nicole"
}
}
]
}
122

Unnormalized Data
{
"id": "123",
"author": {
"id": "1",
"name": "Paul"
},
"title": "My awesome blog post",
"comments": [
{
"id": "324",
"commenter": {
"id": "2",
"name": "Nicole"
}
}
]
}
123

Normalized Example
"posts": {
"123": {
"id": "123",
"author": "1",
"title": "My awesome blog post"
"comments": [ "324" ]
}
},
"comments": {
"324": {
"id": "324",
"commenter": "2"
}
},
"users": {
"1": {
"id": "1",
"name": "Paul",
},
"2": {
"id": "2",
"name": "Nicole",
}
}
124

Normalized State
const state = {
simpleData: ...,
entities: {
posts: { ... },
comments: { ... },
users: { ... },
},
ui: {
selectedComments: [ ... ]
}
};
125

Normalized Reducers
// reducers/entities/comments.js
const comments = (state, action) => { ... };
// reducers/entities/posts.js
const posts = (state, action) => { ... };
// reducers/entities/users.js
const users = (state, action) => { ... };
// reducers/entities/index.js
const entities = combineReducers({comments,posts,users});
// reducers/ui/selectedComments.js
const ui = selectedComments = (state, action) => { ... };
// reducers/ui/index.js
const ui = combineReducers({selectedComments});
// reducers/simpleData.js
const simpleData = (state, action) => { ... };
// reducers/index.js
const app = combineReducers({simpleData, entities, ui});
126

Normalized Updates
function addComment(postId, commentText) {
const commentId = generateId('comment');
return {
type: "ADD_COMMENT",
postId,
commentId,
commentText,
};
};
127

Normalized Updates
const comments = (state = {}, action) => {
...
case ADD_COMMENT:
return {
...state,
[action.commentId]: {
id: action.commentId,
text: action.commentText,
}
};
...
};
128

Normalized Updates
const posts = (state = {}, action) => {
...
case ADD_COMMENT:
const post = state[action.postId];
return {
...state,
[post.id]: {
...post,
comments: [...post.comments, action.commentId],
}
};
...
};
129

Normalized State Alt.
const state = {
simpleData: ...,
entities: {
posts: { byIds: {...}, allIds: [...] },
comments: { byIds: {...}, allIds: [...] },
users: { byIds: {...}, allIds: [...] },
},
ui: {
selectedComments: [ ... ]
}
};
130

Computed Data
http://redux.js.org/docs/recipes/ComputingDerivedData.html

Selectors
• State should be single source of truth
• Normalized data
• No duplicated data
• Computed data can be obtained from state
• Compute under demand
• Memoize results
132

Using reselect
$ npm install --save reselect
133

Create Selector
import { createSelector } from 'reselect';
const getVisibilityFilter = (state) => state.visibilityFilter;
const getTodos = (state) => state.todos;
export const getVisibleTodos = createSelector(
[ getVisibilityFilter, getTodos ],
( visibilityFilter, todos ) => {
switch (visibilityFilter) {
case 'SHOW_ALL':
return todos
case 'SHOW_COMPLETED':
return todos.filter(t => t.completed)
case 'SHOW_ACTIVE':
return todos.filter(t => !t.completed)
}
}
);
134

Selectors of Selectors
const getKeyword = (state) => state.keyword
const getVisibleTodosFilteredByKeyword = createSelector(
[ getVisibleTodos, getKeyword ],
( visibleTodos, keyword ) => {
return visibleTodos.filter(
todo => todo.text.indexOf(keyword) > -1
);
)
)
135

Selectors and Containers
const mapStateToProps = (state) => ({
todos: getVisibleTodos(state),
});
const mapDispatchToProps = (dispatch) => ({
onTodoClick: (id) => {
dispatch(toggleTodo(id))
},
});
const VisibleTodoList = connect(
mapStateToProps,
mapDispatchToProps
)(TodoList);
136

Redux for ReactJS Programmers

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Redux for ReactJS Programmers

Similar to Redux for ReactJS Programmers (20)

More from David Rodenas

More from David Rodenas (18)

Recently uploaded

Recently uploaded (20)

Redux for ReactJS Programmers