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

reduxErste Schritte mit Redux


Bemerkungen

Redux ist eine JavaScript-Bibliothek, die Statuscontainer der Flux-basierten Architektur implementiert.

Redux kann in drei Grundprinzipien beschrieben werden:

  1. Einzelne Quelle der Wahrheit (Single Store)
  2. Zustand ist schreibgeschützt (Aktionen zum Signalisieren einer Änderung erforderlich)
  3. Änderungen werden mit reinen Funktionen durchgeführt (Dies erzeugt einen neuen Status entsprechend den Aktionen)

Hauptteile:

  • Ladenbauer
  • store.dispatch (Aktion)
  • Middleware
  • Reduzierungen

Redux ist erstaunlich einfach. Es verwendet eine Funktion, die als Reduzierer bezeichnet wird (ein Name, der von der JavaScript-Reduzierungsmethode abgeleitet wird), der zwei Parameter übernimmt: eine Aktion und einen nächsten Zustand.

Der Reduzierer hat Zugriff auf den aktuellen Status (bald vorzeitig), wendet die angegebene Aktion auf diesen Status an und gibt den gewünschten nächsten Status zurück.

Reduzierungen sind als reine Funktionen konzipiert. Das heißt, sie produzieren keine Nebenwirkungen. Wenn Sie die gleichen Eingangswerte 100 Mal an einen Reduzierer übergeben, erhalten Sie den gleichen Ausgangswert 100 Mal. Nichts Seltsames passiert. Sie sind vollständig vorhersehbar. Als jemand mit einer prominenten Haftnotiz "NO SURPRISES" auf meinem Monitor ist dies eine wunderbare Idee, die man sich vorstellen kann.

Reduzierungen speichern den Zustand nicht und sie verändern den Zustand NICHT. Sie sind bestanden und kehren zurück. So sehen Reduzierungen in Aktion aus. http://redux.js.org/docs/basics/Reducers.html

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

Versionen

Versionen Veröffentlichungsdatum
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

Installation oder Setup

Grundinstallation:

Sie können die JavaScript-Datei von redux über diesen Link herunterladen.

Sie können auch Redux mit Bower installieren:

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

Als nächstes müssen Sie Redux in Ihre Seite aufnehmen:

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

Wenn Sie npm verwenden , um redux zu installieren, müssen Sie Folgendes ausführen:

npm install redux --save
 

Um redux verwenden zu können, müssen Sie es als Nächstes verwenden (vorausgesetzt, Sie verwenden einen Modul- Bundler wie Webpack ):

var redux = require('redux');
 

Oder wenn Sie einen Es6-Transpiler wie babel verwenden :

import redux from 'redux';
 

Vanilla Redux-Beispiel (ohne Reaktion oder andere)

Sie können die laufende Demo sehen, indem Sie hier klicken .

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