Manage the Flux of your Web Application: Let's Redux
-
Upload
commit-university -
Category
Technology
-
view
75 -
download
0
Transcript of Manage the Flux of your Web Application: Let's Redux
![Page 1: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/1.jpg)
MANAGE THE FLUX OFYOUR WEB APPLICATION:
LET’S REDUX
![Page 2: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/2.jpg)
Redux
![Page 3: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/3.jpg)
@TheStrazz86
https://github.com/francesco-strazzullo
https://medium.com/@TheStrazz86
https://slides.com/francescostrazzullo
![Page 5: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/5.jpg)
https://taskomat.tech/it/
![Page 6: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/6.jpg)
State Management
![Page 7: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/7.jpg)
React
![Page 8: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/8.jpg)
“ A JavaScript library for
building user interfaces
![Page 9: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/9.jpg)
![Page 10: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/10.jpg)
class HelloMessage extends React.Component {
render() {
return <div>Hello {this.props.name}!</div>;}
}
ReactDOM.render(<HelloMessage name="World" />, mountNode);
![Page 11: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/11.jpg)
So Basically...it's not a
framework
![Page 12: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/12.jpg)
Features
![Page 13: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/13.jpg)
Components
![Page 14: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/14.jpg)
JSX
![Page 15: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/15.jpg)
class HelloMessage extends React.Component {
render() {
return React.createElement(
"div",
null,
"Hello ",
this.props.name
);}
}
ReactDOM.render(React.createElement(HelloMessage, { name: "World" }), mountNode);
![Page 16: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/16.jpg)
Virtual Dom
![Page 17: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/17.jpg)
State
![Page 18: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/18.jpg)
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);
![Page 19: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/19.jpg)
![Page 20: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/20.jpg)
![Page 21: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/21.jpg)
![Page 22: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/22.jpg)
Flux
![Page 23: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/23.jpg)
“ Application Architecture For
Building User Interfaces
![Page 24: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/24.jpg)
Why Not MVC?
![Page 25: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/25.jpg)
![Page 26: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/26.jpg)
![Page 27: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/27.jpg)
![Page 28: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/28.jpg)
![Page 29: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/29.jpg)
![Page 30: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/30.jpg)
Action: an event fired in the
system with the purpose to
change its state
![Page 31: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/31.jpg)
Dispatcher: an event bus to
send actions into the system
![Page 32: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/32.jpg)
Store: business logic objects.
Just like the M in MVC
![Page 33: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/33.jpg)
View: React Components
![Page 34: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/34.jpg)
![Page 35: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/35.jpg)
Why Flux?
![Page 36: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/36.jpg)
One Way of Thinking
![Page 37: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/37.jpg)
Constant complexity on big
projects
![Page 38: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/38.jpg)
Redux
![Page 39: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/39.jpg)
“ Redux is a predictable state
container for JavaScript apps
![Page 40: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/40.jpg)
Why not Flux?
![Page 41: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/41.jpg)
One Way of Thinking (Really?)
![Page 42: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/42.jpg)
Principles
![Page 43: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/43.jpg)
"Single source of truth"
The state of your whole application is stored in
an object tree inside a single store.
![Page 44: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/44.jpg)
"State is read-only"
The only way to mutate the state is to emit an
action, an object describing what happened.
![Page 45: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/45.jpg)
"Mutations are written
as pure functions"
To specify how the state tree is transformed by
actions, you write pure reducers.
![Page 46: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/46.jpg)
Elements
![Page 47: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/47.jpg)
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
![Page 48: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/48.jpg)
Reducer
function addTodo(state,text){
var toReturn = Object.assign({},state,{
todos:[...state.todos]
});
toReturn.todos.push(text);
return toReturn;
};
![Page 49: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/49.jpg)
Store + Dispatcher
import { createStore } from 'redux';
import Reducers from 'src/Reducers';
let store = createStore(Reducers);
![Page 50: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/50.jpg)
Container Components
![Page 51: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/51.jpg)
Presentational Components
![Page 52: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/52.jpg)
Why Redux?
![Page 53: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/53.jpg)
One Way of Thinking (Really
this time)
![Page 54: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/54.jpg)
Serilizable State
![Page 55: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/55.jpg)
No side-effect
![Page 56: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/56.jpg)
No Technical Debt
![Page 57: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/57.jpg)
![Page 58: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/58.jpg)
Async Actions
![Page 59: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/59.jpg)
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))
})}
![Page 60: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/60.jpg)
redux-saga
![Page 61: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/61.jpg)
“ A Saga is an independent
component that reacts to
domain events in a cross-
aggregate, eventually
consistent manner.
![Page 62: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/62.jpg)
“ redux-saga is a library that
aims to make side effects in
Redux applications easier and
better.
![Page 63: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/63.jpg)
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;
![Page 64: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/64.jpg)
![Page 65: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/65.jpg)
That's It!
@TheStrazz86
https://github.com/e-xtrategy/javascript-course/
![Page 66: Manage the Flux of your Web Application: Let's Redux](https://reader031.fdocuments.in/reader031/viewer/2022021922/58ed17e71a28abd0628b462d/html5/thumbnails/66.jpg)
Thanks!