1.
Redux
for modular development

2.
Who am I?
+10 years developing mostly in rails
but also java, js, python, php,
haskell, C++
I don’t appreciate programming
languages more than I would
appreciate a hammer.
Likes beer, guitar, business,
technology, music, learning,
dancing, F1, poker, reading, biking,
superheroes, movies, tv series,
wine, food.
@eLafo
linkedin, twitter, github...

3.
Data
Presentation
Logic

4.
0
0
3
3

5.
4^4 = 256different possible global states

6.
What are we
going to see?
Some basics we should know
How I understand a component
How do we wire components to
build a high order component -or
app with redux.
Advantages
Warnings

7.
EXAMPLE

8.
0
DO NOT PRESS!

9.
1
RELEASE!

10.
1
DO NOT PRESS!

11.
0
DO NOT
PRESS!

12.
DO NOT
PRESS!
0

13.
0
DO NOT
PRESS!
Button
pressed

14.
0
DO NOT
PRESS!
Button
pressed

15.
0
DO NOT
PRESS!
Button
pressed

16.
0
DO NOT
PRESS!
Button
pressed
Text: Press!
Button: green
background: red
Counter: 1

17.
1
RELEASE!
Button
pressed
Text: Press!
Button: green
background: red
Counter: 1

18.
1
RELEASE!

19.
1
RELEASE!

20.
RELEASE!
Button
released
1

21.
Button
released
RELEASE!
1

22.
Button
released
RELEASE!
1

23.
Button
released
RELEASE!
1
Text: Press!
Button: green
background: red
Counter: 1

24.
1
DO NOT
PRESS!
Button
released
Text: Press!
Button: green
background: red
Counter: 1

25.
View
Presentation in whichever
flavour (React, Angular, JS,
JQuery...)
DO NOT
PRESS!

26.
Presentation
Data / State
ActionCreators
(events)
1
DO NOT
PRESS!
Presentational
component
Functional
component

27.
Actions
This should be the easy part
Button
released
Button
pressed

28.
Managing state change

29.
This is a new
state. The input
is copied before
doing any
change

30.
State = f(state, action)

31.
State = f(state, action)

32.
Pure function Return value is only determined by
its input values, without
observable side effect

33.
reducer.js
selectors.js
actionTypes.js
Component creator tookit
Data Data Data
Presentational
components
Functional
components
Slot for selector
State input
Slot for action creators
config.js
types.js
actions.js

34.
Data

35.
Data
Presentation
Logic

36.
Presentation
Logic
Presentation
Logic
Presentation
Logic
Presentation
Logic
Presentation
Logic
Presentation
Logic
State / Data

37.
dispatch

38.
dispatch

39.
dispatch

40.
dispatch

41.
reducers
root reducer State

42.
reducers
root reducer State

43.
State
reducers
root reducer

44.
State
reducers
root reducer

45.
State
reducers
root reducer

46.
State
reducers
root reducer

47.
State
reducers
root reducer

48.
State
reducers
root reducer

49.
State
reducers
root reducer

50.
State
reducers
root reducer

51.
REDUX is a library for implementing a
Design Pattern

52.
REDUX attempts to make state
mutations predictable

53.
Inspired by Flux, CQRS and Event
Sourcing

54.
Redux
Principles
Single source of truth
State is read-only
Changes are made by pure
functions

55.
Single source of
truth
Redux principles
The state of your whole application
is stored in an object tree within a
single store.

56.
State is read-
only
Redux principles
The only way to change the state
is to emit an action, an object
describing what happened.

57.
Changes are
made by pure
functions
Redux principles
To specify how the state tree is
transformed by actions, you write
pure reducers.

58.
http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/9

59.
UI = f(state)
State = f(state, action)
Functional programming all around

60.
actions/
todos.js
components/
todos/
TodoItem.js
...
constants/
actionTypes.js
reducers/
todos.js
index.js
rootReducer.js
todos/
components/
actions.js
actionTypes.js
constants.js
index.js
reducer.js
index.js
rootReducer.js
http://jaysoo.ca/2016/02/28/organizing-redux-application/

61.
Can’t be that good...

62.
Side effects

63.
Side effects
● Turn promises into actions (one for each
state)

64.
http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/24

65.
Side effects
● Turn promises into actions (one for each
state)
● Redux-thunk

66.
http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/9

67.
redux-thunk
http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/25

68.
Side effects
● Turn promises into actions (one for each
state)
● Redux-thunk
● redux-api-middleware

69.
http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/9

70.
redux-api-middleware
http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/25

71.
What we have
seen
Why it is so difficult to reuse code
The problem when maintaining the
state
How to think when building
components
How to wire components with redux
How Redux deals with state
A new way of thinking?

72.
Some unmeaningful code (actions)
import * as config from './config'
const CONNECT = config.namespace + “/CONNECT”
const userIsOnline = (user) => ({
return {
type: CONNECT,
payload: user.id
}
});
import * as config form './config'
const SEND_MESSAGE = config.namespace + "/SEND_MESSAGE"
const sendMessage = (chatID, senderID, text) => ({
type: SEND_MESSAGE,
payload: {
chatID: chatID,
message: {
text: text,
status: “sent”,
timestamp: now(),
senderId: senderId,
messageId: getID()
}
}
});

73.
Some unmeaningful code (reducers)
import * as t from './actionTypes'
const usersReducer = (state = initialState, action) =>
{
let newState = _.clone(state);
switch (action.type) {
case t.CONNECT
newState[t.payload.id].status = 'online';
return newState;
default:
return state
}
};
import * as t from './actionTypes'
const chatsReducer = (state = initialState, action) => {
let newState = _.clone(state);
switch (action.type) {
case t.SEND_MESSAGE:
newState[t.payload.chatID].messages.push(t.payload.message);
return newState;
default:
return state
}
};

74.
Some unmeaningful code (Wiring up)
//main.js
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import { createStore } from 'redux';
import AppContainer from './app/containers/AppContainer';
import reducer from './rootReducer';
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
//we create the store and tell it which root reducer to use
let store = createStore(reducer);
//We create the root component and
ReactDOM.render(
<Provider store={store}>
<AppContainer />
</Provider>,
document.getElementById('app')
);
//rootReducer.js
import { combineReducers} from 'redux';
import users from './users';
import chats from './chats';
const combinedReducers = combineReducers({
[users.config.namespace] : users.reducer,
[chats.config.namespace] : chats.reducer
})

75.
Resources and further reading
http://redux.js.org/
https://medium.com/@adamrackis/querying-a-redux-store-37db8c7f3b0f#.fua79muzx
https://scotch.io/tutorials/bookshop-with-react-redux-ii-async-requests-with-thunks
http://softwareengineering.stackexchange.com/questions/235558/what-is-state-mutable-state-and-immutable-state
https://daveceddia.com/timeline-for-learning-react/
http://www.yegor256.com/2016/08/15/what-is-wrong-object-oriented-programming.html
https://datarockets.com/blog/redux-structure
http://jpsierens.com/tutorial-react-redux-webpack/
https://www.sitepoint.com/how-to-build-a-todo-app-using-react-redux-and-immutable-js/
http://jaysoo.ca/2016/02/28/organizing-redux-application/

76.
Resources and further reading
http://es.slideshare.net/nikgraf/react-redux-introduction
http://es.slideshare.net/benlesh1/async-redux-actions-with-rxjs-react-rally-2016
http://es.slideshare.net/nirkaufman/redux-with-angular-2-workshop-2016
http://es.slideshare.net/fdaciuk/designing-applications-with-redux
http://es.slideshare.net/FDConf/redux-from-twitter-hype-to-production-61102006
http://es.slideshare.net/justingordon/react-on-rails-v4032
http://es.slideshare.net/rolandkuhn/reactive-streams

77.
Thank you!!!
http://aspcamp.aspgems.com