Looking for redux Answers? Try Ask4KnowledgeBase
Looking for redux Keywords? Try Ask4Keywords

reduxEmpezando con redux


Observaciones

Redux es una biblioteca de JavaScript que implementa el contenedor de estado de la arquitectura basada en Flux.

Redux se puede describir en tres principios fundamentales:

  1. Única fuente de verdad (tienda única).
  2. El estado es de solo lectura (se necesitan acciones para señalar el cambio)
  3. Los cambios se realizan con funciones puras (esto crea un nuevo estado según las acciones)

Partes principales:

  • constructor de tienda
  • store.dispatch (acción)
  • middleware
  • reductores

Redux es sorprendentemente simple. Utiliza una función llamada reductor (un nombre derivado del método de reducción de JavaScript) que toma dos parámetros: una acción y un estado siguiente.

El reductor tiene acceso al estado actual (que pronto será anterior), aplica la acción dada a ese estado y devuelve el siguiente estado deseado.

Los reductores están diseñados para ser puras funciones; Es decir, no producen efectos secundarios. Si pasa los mismos valores de entrada a un reductor 100 veces, obtendrá exactamente el mismo valor de salida 100 veces. No pasa nada raro. Son completamente predecibles. Como alguien con una prominente nota adhesiva de "NO SORPRESA" en mi monitor, esta es una idea maravillosa para contemplar.

Los reductores no almacenan el estado y NO mutan el estado. Se pasan el estado, y vuelven estado. Así es como se ven los reductores en acción. http://redux.js.org/docs/basics/Reducers.html

Referencia: http://redux.js.org/docs/introduction/Motivation.html

Versiones

Versiones Fecha de lanzamiento
v3.6.0 2016-09-04
v3.5.0 2016-04-20
v3.4.0 2016-04-09
v3.3.0 2016-02-06
v3.2.0 2016-02-01
v3.1.0 2016-01-28
v3.0.0 2015-09-13
v2.0.0 2015-09-01
v1.0.0 2015-08-14

Instalación o configuración

Instalación básica:

Puede descargar el archivo javascript de redux, usando este enlace .

También puedes instalar redux, usando bower :

bower install https://npmcdn.com/redux@latest/dist/redux.min.js
 

A continuación, debe incluir redux a su página:

<html>
  <head>
    <script type="text/javascript" src="/path/to/redux.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script>
      // Redux is available as `window.Redux` variable.
    </script>
  </body>
</html>
 

Instalación de Npm:

Si está utilizando npm , para instalar redux, debe ejecutar:

npm install redux --save
 

A continuación, para usar redux, debe exigirlo (asumiendo que está usando un agrupador de módulos, como un paquete web ):

var redux = require('redux');
 

O si estás usando el transpiler es6, como babel :

import redux from 'redux';
 

Ejemplo de Vanilla Redux (sin React u otros)

Puedes ver la demo en ejecución haciendo clic aquí .

HTML:

<p>
  <span>Counter State</span><br />
  (<em>Will increase each minute</em>):
  <p>
    <span id="counter-state" style="font-weight: bolder"></span>
  </p>
</p>

<p>
  <button id="increment-action">+ Increase +</button>
  <button id="decrement-action">- Decrease -</button>
</p>
 

LÓGICA REDUX:

// ------------------------ reducer helpers ------------------------
let reducers = {}

let addReducer = (reducers, actionType, reducer) =>
  reducers[actionType] = (state, action) => {
    if (action.type == actionType) {
      return reducer(state, action)
    }
  }

let reducer = (state, action) => {
  if (reducers[action.type]) {
    return reducers[action.type](state, action)
  }
  return state
}


// ------------------------ redux setup ------------------------

const { 
  createStore,
  applyMiddleware
  } = Redux


// apply logging middleware (not necessary)
// open the console to see the action logger output on each time new action dispatched
const actionLogger = ({ dispatch, getState }) => next => action => {
  console.log("action logger: action.type=%s state=%d", action.type, getState())
  return next(action)
}


// ------------------------ reducers ------------------------
// those will be creating new states and returning it,
// depending on the dispatched actions
addReducer(reducers, 'INCREMENT', (state, action) => ++state)
addReducer(reducers, 'DECREMENT', (state, action) => --state)


const DEFAULT_STATE = 0

const store = createStore(
  reducer, 
  DEFAULT_STATE, 
  applyMiddleware(actionLogger)
);


console.log(createStore)


// ------------------------ rendering ------------------------
let render = () => document.getElementById('counter-state').innerHTML = store.getState()

//
// IMPORTANT BINDING:
//
// store will be dispatching the new state to the render method each time the state changes
//
store.subscribe(render)

//
// render with the state for the first time
//
render()



// ------------------------ redux actions ------------------------

// continously increment the counter (the state) each second
setInterval(() => store.dispatch({type: 'INCREMENT'}), 1000)

// only increment the counter on click to the increase button
document
  .getElementById('increment-action')
  .addEventListener('click', () => store.dispatch({type: 'INCREMENT'}))

// only decrement the counter on click to the decrease button
document
  .getElementById('decrement-action')
  .addEventListener('click', () => store.dispatch({type: 'DECREMENT'}))