The document discusses Redux, a state management library for JavaScript applications. It explains the three main principles of Redux - single source of truth for state, state is read-only, and changes are made with pure functions called reducers. It then provides an example of building a counter with Redux, including creating an action type, reducer, and using the store to dispatch actions and access the current state.

1. Designing applications
with Redux

2. Fernando Daciuk
npm install fdaciuk

3. http://zimp.me

4. da2k.com.br

5. Daciuk = Da”Two”k

6. Daciuk = Da2k

9. JAVASCRIPT
NINJA
eventick.com.br/curso-javascript-ninja

12. “Redux is a
predictable state container
for JavaScript apps”
http://redux.js.org

13. Why have Redux
was created?

14. “Once upon
a time…”

15. Server
responses

16. Cached
data

17. Local
non-persistent data

18. UI
state

19. Managing this
ever-change state
is hard!

21. Mutation and
asynchronicity

22. Mentos &
Coke

23. React removes async and direct
DOM manipulation

25. You even need
manage state

26. Behold, the
Flux comes!

27. Redux makes predictable
state changes

28. Redux:
three principles

29. Redux:
three principles
1st. Single source
of truth

30. store
Redux:
three principles

31. store
Redux:
three principles
{
counter: 0,
todos: [{ … }]
}

32. Redux:
three principles
2nd. state is
read-only

33. actions
Redux:
three principles

34. actions
{ type: ‘WHAT_TODO’ }
Redux:
three principles

35. Redux:
three principles
3rd. changes are made
with pure functions

36. reducers
Redux:
three principles

37. reducers
function reducer (state, action) => state
Redux:
three principles

38. Why
reducer?

39. Why
reducer?
var arr = [1, 2, 3];
var sum = arr.reduce(function(acc, item) {
return acc + item;
}, 0);
console.log(sum); // 6

40. Why
reducer?
var arr = [1, 2, 3];
var sum = arr.reduce(function(acc, item) {
return acc + item;
}, 0);
console.log(sum); // 6
reducer

41. Changing to
ES2015 (ES6)

42. var arr = [1, 2, 3];
var sum = arr.reduce(function(acc, item) {
return acc + item;
}, 0);
console.log(sum); // 6
Why
reducer?

43. const arr = [1, 2, 3];
var sum = arr.reduce(function(acc, item) {
return acc + item;
}, 0);
console.log(sum); // 6
Why
reducer?

44. const arr = [1, 2, 3];
const sum = arr.reduce(function(acc, item) {
return acc + item;
}, 0);
console.log(sum); // 6
Why
reducer?

45. const arr = [1, 2, 3];
const sum = arr.reduce((acc, item) => {
return acc + item;
}, 0);
console.log(sum); // 6
Why
reducer?

46. const arr = [1, 2, 3];
const sum = arr.reduce((acc, item) =>
acc + item
, 0);
console.log(sum); // 6
Why
reducer?

47. const arr = [1, 2, 3];
const sum = arr.reduce((acc, item) => acc + item
, 0);
console.log(sum); // 6
Why
reducer?

48. const arr = [1, 2, 3];
const sum = arr.reduce((acc, item) => acc + item, 0);
console.log(sum); // 6
Why
reducer?

49. Another
reducer example

50. Another
reducer example
const arr = [1, 2, 3];
const state = arr.reduce((acc, item) => {
return acc.concat(item + 1);
}, []);
console.log(state); // [2, 3, 4]

51. Creating a
counter

52. RULES
Creating a
counter

53. action ‘INCREMENT’ => plus 1
Creating a
counter

54. action ‘INCREMENT’ => plus 1
action ‘DECREMENT’ => minus 1
Creating a
counter

55. action ‘INCREMENT’ => plus 1
action ‘DECREMENT’ => minus 1
action ‘UNKNOWN’ => previous state
Creating a
counter

56. action ‘INCREMENT’ => plus 1
action ‘DECREMENT’ => minus 1
action ‘UNKNOWN’ => previous state
state undefined => initial state (0)
Creating a
counter

57. 1st step:
adding redux
Creating a
counter

58. npm i --save redux
Creating a
counter
~5.9kb - minified
~2kb - gzipped

59. https://cdnjs.cloudflare.com/
ajax/libs/redux/3.3.1/redux.js
Creating a
counter

60. Redux method
createStore

61. createStore(reducer)

62. 2nd step:
creating the reducer
Creating a
counter

63. Creating a
counter
counter.js
const counter = (state, action) => {
return state;
}

64. Creating a
counter
counter.js
const counter = (state, action) => {
switch(action.type) {
case 'INCREMENT': return state + 1;
}
}

65. Creating a
counter
counter.js
const counter = (state, action) => {
switch(action.type) {
case 'INCREMENT': return state + 1;
case 'DECREMENT': return state - 1;
}
}

66. Creating a
counter
counter.js
const counter = (state, action) => {
switch(action.type) {
case 'INCREMENT': return state + 1;
case 'DECREMENT': return state - 1;
}
return state;
}

67. Creating a
counter
counter.js
const counter = (state = 0, action) => {
switch(action.type) {
case 'INCREMENT': return state + 1;
case 'DECREMENT': return state - 1;
}
return state;
}

68. How can I use
this reducer?

69. store
methods

70. getState()
store
methods

71. store
methods
import { createStore } from 'redux';
import counter from './reducers/counter';
const store = createStore(counter);
console.log(store.getState()); // 0

72. dispatch(action)
store
methods

73. store
methods
import { createStore } from 'redux';
import counter from './reducers/counter';
const store = createStore(counter);
console.log(store.getState()); // 0
store.dispatch({ type: 'INCREMENT' });
console.log(store.getState()); // 1

74. subscribe(listener)
store
methods

75. store
methods
import { createStore } from 'redux';
import counter from './reducers/counter';
const store = createStore(counter);
store.subscribe(() => {
console.log(store.getState());
});
store.dispatch({ type: 'INCREMENT' }); // 1
store.dispatch({ type: 'INCREMENT' }); // 2
store.dispatch({ type: 'DECREMENT' }); // 1

76. We have time
for a full demo?

77. Redux supports
middlewares

78. async state
redux-thunk
gaearon/redux-thunk

79. async state
redux-saga
yelouafi/redux-saga

80. http://redux.js.org

81. Think outside
the box!
Think outside

82. Fernando Daciuk
FullStack Engineer
Thanks!
/fdaciuk/talks npm install fdaciuk