Estudio de Redux

• Flujo de datos unidireccional
• Estado único
• Acciones y reductores

• Estado en React y Angular
• Aplicaciones de una sola página (SPA)
• Requisitos de estado complejos

Instalación: npm i redux

import { createStore } from 'redux';
const reducer = (s = 0, a) => (a.type === 'INC' ? s + 1 : s);
const store = createStore(reducer);
store.dispatch({ type: 'INC' });

1. Contador con store

Store Redux con acciones y reductor.

import { createStore } from 'redux';

const reducer = (s = 0, a) => {
  switch (a.type) { case 'INC': return s + 1; case 'DEC': return s - 1; default: return s; }
};
const store = createStore(reducer);

store.dispatch({ type: 'INC' });
console.log(store.getState()); // 1

2. Lista de tareas

Añadir y completar tareas con actions.

import { createStore } from 'redux';

const reducer = (s = [], a) => {
  if (a.type === 'ADD') return [...s, { texto: a.texto, ok: false }];
  if (a.type === 'TOGGLE') return s.map((t, i) => i === a.i ? { ...t, ok: !t.ok } : t);
  return s;
};
const store = createStore(reducer);
store.dispatch({ type: 'ADD', texto: 'Estudiar' });
store.dispatch({ type: 'TOGGLE', i: 0 });