reduxAan de slag met redux


Opmerkingen

Redux is een JavaScript-bibliotheek die de statuscontainer van de op Flux gebaseerde architectuur implementeert.

Redux kan worden beschreven in drie fundamentele principes:

  1. Eén bron van waarheid (één winkel)
  2. Status is alleen-lezen (actie vereist om verandering aan te geven)
  3. Wijzigingen worden aangebracht met pure functies (dit creëert een nieuwe status volgens de acties)

Hoofd onderdelen:

  • winkelconstructeur
  • store.dispatch (actie)
  • middleware
  • verloopstukken

Redux is verbazingwekkend eenvoudig. Het gebruikt een functie die een verloopstuk wordt genoemd (een naam die is afgeleid van de JavaScript-verkleiningsmethode) en waarvoor twee parameters nodig zijn: een actie en een volgende status.

Het verloopstuk heeft toegang tot de huidige status (binnenkort de vorige), past de gegeven actie toe op die status en retourneert de gewenste volgende status.

Verloopstukken zijn ontworpen om pure functies te zijn; wat betekent dat ze geen bijwerkingen veroorzaken. Als u 100 keer dezelfde invoerwaarden aan een verloopstuk doorgeeft, krijgt u 100 keer exact dezelfde uitvoerwaarde. Er gebeurt niets vreemds. Ze zijn volledig voorspelbaar. Als iemand met een prominente notitie "GEEN VERRASSINGEN" op mijn monitor, is dit een geweldig idee om over na te denken.

Reducers slaan de status niet op en ze muteren de status NIET. Ze zijn de staat gepasseerd en ze keren terug. Dit is hoe verloopstukken er in actie uitzien. http://redux.js.org/docs/basics/Reducers.html

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

versies

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

Installatie of instellingen

Basis installatie:

U kunt redux javascript-bestand downloaden via deze link .

Je kunt ook redux installeren met behulp van bower :

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

Vervolgens moet u redux toevoegen aan uw pagina:

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

Npm installatie:

Als u npm gebruikt , moet u het volgende uitvoeren om redux te installeren:

npm install redux --save
 

Om redux te gebruiken, moet je het vervolgens nodig hebben (ervan uitgaande dat je modulebundler gebruikt, zoals webpack ):

var redux = require('redux');
 

Of als u es6 transpiler gebruikt, zoals babel :

import redux from 'redux';
 

Vanilla Redux-voorbeeld (zonder React of anderen)

U kunt de lopende demo bekijken door hier te klikken .

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>
 

REDUX LOGIC:

// ------------------------ 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'}))