ReactJS + Redux

ReactJS est puissant avec la gestion des états. Mais quand on a plusieurs composants impriqués, on aura un nouveau problème dans une application complexe, la communication entre les composants. On peut bien évidemment "transformer" un état d'un composant à une props d'un autre composant pour faire le passage de variable entre eux, cela implique que, plus elle possède de plusieurs composants, plus qu'elle doit assurer la cohérence de passage, ce qui n'est pas souhaitable lors de la maintenance. La solution est de créer un état global, et que tous les composant peuvent accèder à un même état.  

On a donc un état global qui sont accèdé par plusieurs composants. Avec typescript, on peut créer facilement un reducer commun qui est accessible, quelque soit Angular ou React. L'exemple ci-dessous montre un reducer d'un compte a rebours:

import { Action, Reducer } from 'redux';

enum ActionNames {
    INC = 'counter/increment',
    DEC = 'counter/decrement',
}

interface IncrementAction extends Action {
    type: ActionNames.INC
    plusAmount: number
}
export const incrementAmount = (amount: number): IncrementAction => ({
    type: ActionNames.INC,
    plusAmount: amount
})

interface DecrementAction extends Action {
    type: ActionNames.DEC
    minusAmount: number
}

export const decrementAmount = (amount: number): DecrementAction => ({
    type: ActionNames.DEC,
    minusAmount: amount
})

export interface CounterState {
    num: number
}

export type CounterActions = IncrementAction | DecrementAction

const initialState: CounterState = { num: 0 };

export default function CounterReducer(state: CounterState = initialState, action: CounterActions): CounterState {
    switch (action.type) {
        case ActionNames.INC:
            return { num: state.num + action.plusAmount }
        case ActionNames.DEC:
            return { num: state.num - action.minusAmount }
        default:
            return state;
    }
}