Un poquito de mi antes de seguir

¿Qué es redux?

"Redux is a predictable state container for JavaScript apps."

- Redux homepage

Los 3 principios de Redux

Single source of truth

"Única fuente de verdad"

// El store es un simple objeto de js

{
  visibilityFilter: 'SHOW_ALL',
  todos: [
    {
      text: 'Consider using Redux',
      completed: true,
    },
    {
      text: 'Keep all state in a single tree',
      completed: false
    }
  ]
}

State is read-only

"El estado (global) sólo se puede leer"

// Cada acción es un simple objeto
{
  type: COMPLETE_TODO,
  index: 1
}


// "Despachar" una acción
store.dispatch({
  type: SET_VISIBILITY_FILTER,
  filter: 'SHOW_COMPLETED'
})

Changes are made with pure functions

"Los cambios son hechos con funciones puras"

// Función pura

sumConst(param) {
  let myConst = 1;

  return param + myConst;
}

sumConst(1);  // 2
sumConst(10); // 11

myConst = 5;

sumConst(1);  // 2
sumConst(10); // 11

// Todos reducer

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ]

    case 'COMPLETE_TODO':
      return state.map((todo, index) => {
        if (index !== action.index) return todo;
       
        return {
            ...todo,
            completed: true,
        }
      })

    default:
      return state
  }
}

Reducer

Conceptos nuevos