redux.md

Redux es un almacenador de estados

con redux nuestra aplicación puede trabajar con estados en un solo arbol de datos. Redux trabaja con unos cuantos métodos pero efectivos los cuales son

• createStore
• dispatch
• getState
• subscribe

un ejemplo básico:

import { createStore } from 'redux'

function counterReducer(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

const store = createStore(counterReducer)
console.log(store.getState()) // 0

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

En el ejemplo anterior vemos como tenemos nuestro almacén de estados (counterReducer) llamado store el cual mediante el metodo dispatch podemos cambiar los datos y almacenarlos nuevamente. Pero como dije esto es un ejemplo básico, el cual solo tenemos un reductor counterReducer . Que pasaría si nuestra aplicación tuviese más estados y quisieramos separar por grupos? es decir multiples reductores como por ejemplo users, comments, etc? pues ahi necesitaremos usar combineReducers

Ahora veamos un ejemplo de como trabajar con multiples reductores combineReducers :

import { createStore, combineReducers } from 'redux'

function todosReducer(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return state.concat([action.text])
    default:
      return state
  }
}
function counterReducer(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}
const reducers = combineReducers({
  todos: todosReducer,
  counter: counterReducer
})

const store = createStore(reducers)
console.log(store.getState())
// {
//   counter: 0,
//   todos: []
// }

store.dispatch({
  type: 'ADD_TODO',
  text: 'Use Redux'
})
console.log(store.getState())
// {
//   counter: 0,
//   todos: [ 'Use Redux' ]
// }