Premiers pas avec redux

Installation ou configuration

Installation basique:

Vous pouvez télécharger le fichier javascript redux en utilisant ce [lien][1].

Vous pouvez également installer redux, en utilisant [bower][2] :

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

Ensuite, vous devez inclure redux à votre page :

<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>

Installation Npm :

Si vous utilisez [npm][3], pour installer redux, vous devez exécuter :

npm install redux --save

Ensuite, pour utiliser redux, vous devez l’exiger (en supposant que vous utilisez un module bundler, comme [webpack][4]) :

var redux = require('redux');

Ou si vous utilisez le transpileur es6, comme [babel][5] :

import redux from 'redux';

[1] : https://npmcdn.com/redux@latest/dist/redux.min.js [2] : http://bower.io [3] : https://www.npmjs.com/ [4] : http://webpack.github.io [5] : http://babeljs.io

Vanilla Redux Example (sans React ou autres)

Vous pouvez voir la démo en cours d’exécution en cliquant ici.

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>

LOGIQUE 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'}))
Flux de données asynchrone →