Redux concepts

applyMiddleware.js

const REQUESTING_DATA = 'REQUESTING_DATA'
const RECEIVED_DATA = 'RECEIVED_DATA'

const requestingData = () => { return {type: REQUESTING_DATA} }
const receivedData = (data) => { return {type: RECEIVED_DATA, users: data.users} }

const handleAsync = () => {
  return function(dispatch) {
    // dispatch request action here
    dispatch(requestingData())
    setTimeout(function() {
      let data = {
        users: ['Jeff', 'William', 'Alice']
      }
      // dispatch received data action here
      dispatch(receivedData(data))
    }, 2500);
  }
};

const defaultState = {
  fetching: false,
  users: []
};

const asyncDataReducer = (state = defaultState, action) => {
  switch(action.type) {
    case REQUESTING_DATA:
      return {
        fetching: true,
        users: []
      }
    case RECEIVED_DATA:
      return {
        fetching: false,
        users: action.users
      }
    default:
      return state;
  }
};

const store = Redux.createStore(
  asyncDataReducer,
  Redux.applyMiddleware(ReduxThunk.default)
);

operadores.js

//Cuando el estado es un array, el reducer debe retornar
return [...state,nuevoItem];

//Cuando el estado es un objeto, el reducer debe retornar
return Object.assign({},state,{nombre:'valor'});

redux.md

Teoria Redux

• Redux tiene un método para crear un store, este se crea con createStore()
• En redux todas las actualizaciones de estado son disparados por acciones despachadoras
• Un action es simplemente un objeto javascript que contiene información sobre un action event que ha ocurrido
• El store recibe esos objetos de acciones entonces actualiza su estado respectivamente
• A veces un action trae algunos datos, por ejemplo: puede traer un nombre de usuario despues que un usuario inicia sesión

Contenido obligatorio de un action

• Debe contener una propiedad type que especifica el tipo de acción que ocurre
• Pensar que las redux actions son mensajeros que entregan información sobre lo que pasa en la aplicación. El store entonces conduce los negocios de actualización de estado basado en la acción que ocurrió

Action Creator

• Un action creator es una funcion de javascript que retorna un action

Método dispatch

• El métoodo dispatch es lo que se usa para despachar acciones al store

Manejar una accion en el store

• Despues de que una acción es creada y despachada, el store necesita saber cómo responder a esa acción, esto último es trabajo de un reducer

Reducer

• Reducers son los reponsables de las modificaciones de estado que toman lugar como respuesta a una acción
• Un reducer toma como argumentos el state y action y siempre retorna un nuevo estado
• !Es importante mencionar que lo anterior es únicamente rol del reducer¡
• !Nunca llama a un endpoint de una API ni trae sorpresas escondidas¡

Principios clave en Redux

• El state es de solo lectura,la función reductora es la que se encarga de retornar una nueva copia del estado y nunca modificarlo directamente
• Nunca debes mutar el estado: estado inmutable significa que nunca modificas el estado directamente, en vez, regresas una nueva copia del estado

Store Listener

• Otro método que contiene store es subscribe, te permite suscribir funciones escuchadoras al store, que son llamadas cuando sea que una accion es despachada contra el store
• Un ejemplo de uso sería para registrar un mensaje cuando una acción es recibida y el store es actualizado

Combinar múltiples reducers

• Redux proporciona composición de reductor,como una solución a un modelo de estado complejo
• Definir múltiples reducers para manejar diferentes piezas del estado de tu aplicación, entonces compones esos reducers juntándolos en un solo reductor raíz
• El reductor raíz es pasado al método createStore
• Para juntar los reducers en un reductor raíz, redux proporciona un método combineReducers

Usar middleware para manejar acciones asincronas(Redux thunk)

• Cuando necesitas hacer llamadas a endpoints asincronamente, redux provee Redux thunk middleware
• Para incluir Redux thunk middleware lo pasas como argumento a Redux.applyMiddleware()
• Una vez pasado, Redux.applyMiddleware() es pasado como argumento a createStore()
• Es común enviar una acción antes de iniciar cualquier comportamiento asincrono para que el estado de su aplicación sepa que se están solicitando algunos datos (este estado podría mostrar un icono de carga, por ejemplo). Luego, una vez que recibe los datos, envía otra acción que transporta los datos como una carga útil junto con la información de que la acción se ha completado.
• Recuerde que estás pasando el dispatch como parámetro a este creador de acción especial. Esto es lo que usará para despachar sus acciones, simplemente pase la acción directamente al dispatch y el middleware se encargará del resto.

Operadores

• Cuando el estado es un arreglo se usan los operadores ... y splice
• Cuando el estado es un objeto se puede usar el método assign de Object