1Ø1

O que é o Redux?

Lib que gerencia uma State previsível e imutável

Single Source of Truth

State is read-only

Changes are made with pure functions

Redux Data Flow

Actions

Uma intenção de mudar o state. Único caminho para a store.

let nextVampireId = 0;

export const ADD_VAMPIRE = 'ADD_VAMPIRE';

/* Action Creator */
export function addVampire(vamp) {
  /* Action */
  return { 
    type: ADD_VAMPIRE,
    payload: {
      id: nextVampireId++,
      name: vamp
    }
 };
}         

<button onClick={dispatch(addVampire('Tiago'))}>Add Vampire</button>

Reducers

Altera o state pelas Actions

import { ADD_VAMPIRE } from './vampires.js';

export default function vampires(state = [], action) {
  switch (action.type) {
    case ADD_VAMPIRE:
      const { id, name } = action.payload;
      return [
        ...state,
        { id, name }
      ]
    default:
      return state;
  }               
}        

Store

import { createStore, combineReducers } from 'redux';
import { vampires } from './reducers.js';

let store = createStore(combineReducers({ vampires }));

/* {
  vampires: []  
} */

store.dispatch(addVampire('Temer'));

/* {
  vampires: [{ id: 1, name: 'Temer'}]  
} */

Code Time

Links/Utils

React Conf: Hot Reloading with Time Travel

Redux Docs

Egghead: Getting Started with Redux

Normalizr (Nested Entities)

Redux Ignore

Exemplo do jsfiddle