1. Redux
IVAN LOVRIĆ 1

2. Redux Open-source JavaScript library
Designed for managing application state  2

3. Redux JS jQuery React React + Redux WHEN DO I NEED REDUX?
Complex data flows
Inter-component communication
Non-hierarchical data
Many actions
Same data used in multiple places JS
jQuery
React
React + Redux
Simple
No setup
Complex
Significant setup 3

4. Redux WHAT ARE WE GOING TO LEARN: REDUX …AND MORE ACTIONS REDUCERS
STORE
…AND MORE
PURE FUNCTIONS
IMMUTABILITY 4

5. Redux 3 PRINCIPLES OF REDUX One immutable store
Actions trigger changes
Reducers update state 5

6. Redux REDUX FLOW Action Store Reducers React
{ type: RATE_COURSE, rating: 5 }
function appReducer(state, action) {
switch(action.type){
case RATE_COURSE:
// return new state }
Store
Reducers
React
Notified via React-Redux 6

7. Redux REDUX ACTION USING ACTION CONSTANTS REDUX ACTION CREATOR
{ type: RATE_COURSE, rating: rating }
USING ACTION CONSTANTS
export const RATE_COURSE = 'RATE_COURSE';
REDUX ACTION CREATOR
rateCourse(rating){
return { type: RATE_COURSE, rating: rating } } 7

8. Redux REDUX REDUCER “state is read-only”
function myReducer(state, action){
switch (action.type){
case INCREMENT_COUNTER:
// return new state based on action passed }
action
state
new state 8

9. // Pure functions Redux REDUX REDUCER
“changes are made with pure functions”
// Pure functions
function square(x) {
return x * x; }
function squareAll(items) {
return items.map(square); 9

10. // Impure functions Redux REDUX REDUCER
“changes are made with pure functions”
// Impure functions
function square(x) {
updateXInDatabase(x);
return x * x; }
function squareAll(items) {
for (let i = 0; i < items.length; i++) {
items[i] = square(items[i]);
10

11. Redux FORBIDDEN IN REDUCERS Mutate arguments Perform side effects
Call non-pure functions
11

12. Redux ALL REDUCERS ARE CALLED ON EACH DISPATCH
{ type: DELETE_COURSE, 1 }
loadStatus
authors
courses
New State
12

13. Redux
REDUX REDUCER
“slice of state” }
Store
13

14. Redux REDUX STORE “single source of truth”
const store = createStore(reducer);
store.dispatch(action)
store.subscribe(listener)
store.getState()
replaceReducer(nextReducer)
14

15. Redux IMMUTABILITY “to change state, return a new object” state = {
MUTATING STATE
NOT MUTATING STATE
state = {
name: ‘Ivan’,
role: ‘developer’ }
state.role = ‘admin’;
return state;
state = {
name: ‘Ivan’,
role: ‘developer’ }
return state = {
role: ‘admin’
15

16. Redux IMMUTABILITY “to change state, return a new object”
SIGNATURE
Object.assign(target, ...sources)
EXAMPLE
Object.assign({}, state, { role: ‘admin’ });
Handling Immutable State
ES6
ES5
LIBRARIES
Lodash merge
Lodash extend
Object-assign
Object.assign
Spread operator
react-addons-update
Immutable.js
16

17. Redux WHY IMMUTABILITY? Clarity Performanse Awesome sauce
Q: “Huh, who changed that state?”
A: “The reducer, stupid!”
Performanse
Q: “Has this changed?”
Awesome sauce
17

18. Redux SUMMARY: DATA FLOW State Store UI Redux Action contains defines
updates
triggers
Redux
Action
sent to
18

19. https://bitbucket.org/IvanLovric/fesb-react-redux
DEMO
19

20. Redux ACTIONS Represent user intent Must have a type STORE
dispatch, subscribe, getState…
IMMUTABILITY
Just return a new copy
REDUCERS
Must be pure
Multiple per app
Slice of state
20

21. CAREERS
21

22. Q&A
22