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

Talk-driven development State Container previsível, facil de entender Inspirado no Flux sem a complexidade

Redux Data Flow

The state of your whole application is stored in an object tree within a single store. The only way to mutate the state is to emit an action, an object describing what happened. To specify how the state tree is transformed by actions, you write pure reducers.

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>

Actions are payloads of information that send data from your application to your store. They are the only source of information for the store. You send them to the store using store.dispatch().

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'}]  
} */