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)