Theodo Summer School
State management avec Redux
Exemple sur une table de mixage
100% DIGITALE
de DIsk-Jokey technophile
#LaRévolutionnumérique
Youtube
Downloader + Converter
Beats Per Minute (BPM)
Detector
Lien Youtube
Files
Simple Http Server
Lien Youtube
Redux
Container de state pour des applications Javascript
http://redux.js.org/
React redux
Goodies pour utiliser Redux dans son application React
http://redux.js.org/docs/basics/UsageWithReact.html
IMMUTABLE
Fournit des structures de données qui ne sont pas mutables
https://facebook.github.io/immutable-js/
Pourquoi ?
- Prédictibilité de l'application
- Une seule source de vérité : le state avec Redux
- Pas de mutations et d'effets secondaires avec Immutable
- Bug Hunting
- Un state <=> Un état de l'application
- On peut reproduire les scénarios de bug plus facilement
- Standardisation
- Verbeux mais standardisé et testable
- Expérience développeur
- Console développeur
- Voyage dans le temps
{
todos: [{
text: 'Voir que Tyrion est mort
dans le GOT E03',
completed: true
}, {
text: 'Avoir gâché la surprise
aux retardataires',
completed: false
}]
}
Voir que Tyrion est mort dans le GOT E03
Avoir gâché la surprise aux retardataires
<=>
State : du JSON
Application
Action
Action creator
Une fonction qui renvoie une action
{
type: ADD_TODO,
text: 'Préparer des slides'
}
const addTodo = (text) => ({
type: 'ADD_TODO',
text
});
Reducer
(previousState, action) => newState
Une fonction pure qui prend l'ancien state (complet) et une action, et renvoie le nouveau state (complet)
import { List } from 'immutable';
const reducer = (state = List(), action) => {
switch (action.type) {
case ADD_TODO:
return state.push(
{
text: action.text,
completed: false,
}
);
default:
return state;
}
};
export default reducer;
STORE
import { createStore } from 'redux'
import reducers from './reducers'
let store = createStore(reducers);
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
Containers
Composant 1
Composant 2
Composant 3
State
State
State
Props
Props
Containers
Container 1
Composant 2
Container 3
Props
Props
State
State
Props
Props
Containers
const mapStateToProps = (state, ownProps) => {
return {
active: ownProps.filter === state.visibilityFilter
}
}
const mapDispatchToProps = (dispatch, ownProps) => {
return {
onClick: () => {
dispatch(setVisibilityFilter(ownProps.filter))
}
}
}
const FilterLink = connect(
mapStateToProps,
mapDispatchToProps
)(Link)
deck
By Woody Rousseau
deck
- 822