Flux, un pattern alternativo a MVC sviluppato dagli ingegneri di Facebook; Redux, nuovo pattern ideato da Dan Abramov che da molti è considerato un’evoluzione di Flux. Pattern architetturali, i loro pregi, i loro difetti, insieme a Francesco Strazzullo.

1. MANAGE THE FLUX OF
YOUR WEB APPLICATION:
LET’S REDUX

2. Redux

3. Ego Slide
f.strazzullo@extrategy.net
@TheStrazz86
https://github.com/francesco-strazzullo
https://medium.com/@TheStrazz86
https://slides.com/francescostrazzullo

4. http://codingjam.it/

5. https://taskomat.tech/it/

6. State Management

7. React

8. “ A JavaScript library for
building user interfaces

10. class HelloMessage extends React.Component {
render() {
return <div>Hello {this.props.name}!</div>;
}
}
ReactDOM.render(<HelloMessage name="World" />, mountNode);

11. So Basically...it's not a
framework

12. Features

13. Components

14. JSX

15. class HelloMessage extends React.Component {
render() {
return React.createElement(
"div",
null,
"Hello ",
this.props.name
);
}
}
ReactDOM.render(React.createElement(HelloMessage, { name: "World" }), mountNode);

16. Virtual Dom

17. State

18. class Timer extends React.Component {
constructor(props) {
super(props);
this.state = {secondsElapsed: 0};
}
tick() {
this.setState((prevState) => ({
secondsElapsed: prevState.secondsElapsed + 1
}));
}
componentDidMount() {
this.interval = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
return (
<div>Seconds Elapsed: {this.state.secondsElapsed}</div>
);
}
}
ReactDOM.render(<Timer />, mountNode);

22. Flux

23. “ Application Architecture For
Building User Interfaces

24. Why Not MVC?

30. Action: an event fired in the
system with the purpose to
change its state

31. Dispatcher: an event bus to
send actions into the system

32. Store: business logic objects.
Just like the M in MVC

33. View: React Components

35. Why Flux?

36. One Way of Thinking

37. Constant complexity on big
projects

38. Redux

39. “ Redux is a predictable state
container for JavaScript apps

40. Why not Flux?

41. One Way of Thinking (Really?)

42. Principles

43. "Single source of truth"
The state of your whole application is stored in
an object tree inside a single store.

44. "State is read-only"
The only way to mutate the state is to emit an
action, an object describing what happened.

45. "Mutations are written
as pure functions"
To specify how the state tree is transformed by
actions, you write pure reducers.

46. Elements

47. Actions
import Dispatcher from "src/Dispatcher";
var add = function(text) {
Dispatcher.dispatch({
actionType: "addTodo",
text: text
});
};
var add = function(text) {
return {
actionType: "addTodo",
text: text
};
};
Flux Redux

48. Reducer
function addTodo(state,text){
var toReturn = Object.assign({},state,{
todos:[...state.todos]
});
toReturn.todos.push(text);
return toReturn;
};

49. Store + Dispatcher
import { createStore } from 'redux';
import Reducers from 'src/Reducers';
let store = createStore(Reducers);

50. Container Components

51. Presentational Components

52. Why Redux?

53. One Way of Thinking (Really
this time)

54. Serilizable State

55. No side-effect

56. No Technical Debt

58. Async Actions

59. onClick() {
this.props.dispatch(actions.requestData())
this.api.list().then(response => {
this.props.dispatch(actions.requestDataSuccess(response.data))
}).catch(error => {
this.props.dispatch(actions.requestDataError(error))
})
}

60. redux-saga

61. “ A Saga is an independent
component that reacts to
domain events in a cross-
aggregate, eventually
consistent manner.

62. “ redux-saga is a library that
aims to make side effects in
Redux applications easier and
better.

63. function* fetch() {
try {
const data = yield call(api.list);
yield put(actions.requestDataSuccess(data));
} catch (e) {
yield put(actions.requestDataError(e));
}
}
function* mySaga() {
yield takeLatest("REQUEST_DATA", fetch);
}
export default mySaga;

65. That's It!
f.strazzullo@e-xtrategy.net
@TheStrazz86
https://github.com/e-xtrategy/javascript-course/

66. Thanks!