Redux

Redux on ennustettava tilasäilö JavaScript-ohjelmille.

Sen avulla voi kirjoittaa ohjelmia, jotka käyttäytyvät määrätysti, ovat suoritettavissa eri ympäristöissä (selaimessa, palvelimella ja natiiveina) sekä ovat helposti testattavissa. Näiden etujen lisäksi Redux tarjoaa hyvän käyttökokemuksen kehittäjälle, kuten suorituksenaikaisen koodinmuokkauksen ja aikamatkaavan debuggerin.

Reduxia voi käyttää yhdessä Reactin tai minkä tahansa muun näkymäkirjaston kanssa.
Redux on pieni (2 kt) ja sillä ei ole riippuvuuksia.

Uutta! Opi Reduxia suoraan luojaltaan:
Alkuun Reduxin kanssa (30 englanninkielistä ilmaista videota)

Arvostusta

“Pidän siitä mitä olet saanut aikaan Reduxilla”
Jing Chen, Fluxin luoja

“Pyysin mielipiteitä Reduxista Facebookin sisäisellä JS-kanavalla ja sitä kehuttiin laidasta laitaan. Todella hienoa työtä.”
Bill Fisher, Flux-dokumentaation vastuuhenkilö

“On hienoa kuinka kehität paremman Fluxin ilman Fluxin häivääkään.”
André Staltz, Cyclen alkuunpanija

Kehittäjän käyttökokemus

Kirjoitin Reduxin työstäessäni React Europen esitystä Välitön uusiolataaminen ja aikamatkustus. Tavoitteeni oli luoda tilanhallintakirjasto minimalistisella API:lla ja silti ennustettavalla käyttäytymisellä, jotta olisi mahdollista kehittää lokitus, välitön uusiolatautuminen, aikamatkustus, universaalius, nauhoitus ja toisto ilman ylimääräistä lisätyötä kehittäjän toimesta.

Vaikutteet

Redux jalostaa Fluxin ideoita, mutta välttää sen monimutkaisuutta ottaen inspiraatiota Elmistä.
Reduxilla pääsee nopeasti alkuun riippumatta siitä onko käyttänyt kumpaakaan mainituista.

Asennus

Vakaan version asentamiseksi:

npm install --save redux

Todennäköisimmin tarvitset myös React-työkalut ja kehitystyökalut.

npm install --save react-redux
npm install --save-dev redux-devtools

Oletuksena on että käytössä on npm-paketinhallinta yhdessä moduuliniputtajan kuten Webpack tai Browserify kanssa. Ne syövät CommonJS-moduuleja.

Mikäli et vielä käytä npm:ää tai modernia moduuliniputtajaa ja suosit mieluummin yhden tiedoston UMD buildia, joka tuo Reduxin saataville globaalina objektina, voit hakea valmiiksi luodun version cdnjs:stä. Emme suosittele tätä tapaa vakavaan käyttöön, sillä valtaosa Reduxia tukevista kirjastoista on ainoastaan saatavilla npm:ssä.

Pähkinänkuoressa

Kaikki ohjelman tila (state) on säilöttynä objektipuuna yksittäisessä säilössä (store).
Ainut tapa muuttaa tilapuuta on lähettää toiminto (action), joka on muutoksen kuvaava objekti.
Toimintojen vaikutus tilapuuhun määritellään käyttäen puhtaita pelkistimiä (pure reducer).

Siinä kaikki!

import { createStore } from 'redux'

/**
 * Tämä on pelkistin, joka on (tila, toiminto) => tila -mallia noudattava puhdas funktio.
 * Se kuvaa kuinka toiminto muuttaa tilan seuraavaksi tilaksi.
 *
 * Tilan rakenne on päätettävissäsi: se voi olla primitiivi, taulukko, objekti tai jopa
 * Immutable.js:n tietorakenne. Ainut tärkeä asia on, että tilaobjektia ei saa mutatoida
 * vaan lopputulemana tulee palauttaa uusi objekti silloin kun tila muuttuu.
 *
 * Tässä esimerkissä käytämme `switch`:iä ja merkkijonoja, mutta voit käyttää eri konventiota
 * noudattavaa helpperiä (kuten funktiokartat), mikäli se tekee tolkkua projektissasi.
 */
function counter(state = 0, action) {
  switch (action.type) {
  case 'INCREMENT':
    return state + 1
  case 'DECREMENT':
    return state - 1
  default:
    return state
  }
}

// Luo redux-säilön ohjelman tilaa varten.
// Sen API on { subscribe, dispatch, getState }.
let store = createStore(counter)

// Päivityksiin voi liittyä manuaalisesti tai käyttäen näkymän sitojia.
store.subscribe(() =>
  console.log(store.getState())
)

// Ainut tapa aiheuttaa mutaatio sisäiseen tilaan on välittää (dispatch) toiminto.
// Toimintoja voi serialisoida, lokittaa tai säilöä, ja toistaa myöhemmin.
store.dispatch({ type: 'INCREMENT' })
// 1
store.dispatch({ type: 'INCREMENT' })
// 2
store.dispatch({ type: 'DECREMENT' })
// 1

Suoran tilan mutatoinnin sijaan toteutettavat mutaatiot kuvataan käyttäen normaaleja objekteja, joita kutsutaan toiminnoiksi (action). Tämän jälkeen toteutetaan pelkistin (reducer), joka päättää kuinka kukin toiminto muokkaa koko ohjelman tilaa.

Mikäli taustasi on Fluxissa, niin on yksi tärkeä asia joka tulee huomioida. Reduxilla ei ole Dispatcheria eikä se tue useampaa säilöä. Näiden sijaan on olemassa vain yksi säilö ja sillä vain yksi juuritason pelkistinfunktio. Ohjelman kasvaessa säilöjen lisäämisen sijasta tehdään vastuunjakoa toteuttamalla pienempiä pelkistimiä, jotka vastaavat omasta osastaan tilapuuta itsenäisesti. Tämä on juuri kuten Reactissa, jossa on vain yksi juurikomponentti, mutta jonka sisällä on monia pienempiä komponentteja.

Tämänkaltainen arkkitehtuuri voi vaikuttaa liioittelulta laskuriohjelmalle, mutta tämän toimintamallin etuna on se, kuinka hyvin se skaalautuu suuriin ja monimutkaisiin ohjelmistoihin. Lisäksi tämä toimintamalli mahdollistaa erittäin hyödylliset kehitystyökalut, sillä jokainen mutaatio on mahdollista jäljittää toimintoon, joka sen aiheutti. Voit esimerkiksi nauhoittaa käyttäjäsessioita ja toistaa ne ajamalla niiden toiminnot järjestyksessä.

Dokumentaatio (linkit päivittämättä)

• Esittely
• Perusteet
• Kehittynyt käyttö
• Reseptit
• Ongelmienratkaisu
• Sanasto
• API

Halutessasi PDF-, ePub- tai MOBI-version offlinelukemista varten, sekä löytääksesi ohjeet kuinka luoda ne, katso see: paulkogel/redux-offline-docs (englanniksi).

Esimerkkejä (linkit päivittämättä)

• Laskuri (lähdekoodi)
• TodoMVC (lähdekoodi)
• Todo ja peruminen (lähdekoodi)
• Asynkronisuus (lähdekoodi)
• Universaalius (lähdekoodi)
• Oikea maailma (lähdekoodi)
• Ostoskori (lähdekoodi)

Jos NPM on uusi asia ja et pääse vauhtiin projektin kanssa, tai jos et ole varma minne pastettaa ylläolevia gistejä, niin kurkkaa simplest-redux-example, joka käyttää Reduxia yhdessä Reactin ja Browserifyn kanssa.

Opi Reduxia suoraan luojaltaan

Alkuun Reduxin kanssa on videokurssi, joka koostuu 30:sta Dan Abramovin, Reduxin luojan, juontamasta jaksosta. Se on luotu täydentämään dokumentaation perusteiden osioita tuoden kuitenkin lisää näkemystä asioihin kuten mutatoimattomuuteen, testaukseen, Reduxin suositeltuihin käytänöihin sekä Reduxin käyttöön Reactin kanssa. Kurssi on ilmainen ja tulee aina olemaan.

“Hieno kurssi egghead.io:ssa @dan_abramov'lta - pelkän käytön näyttämisen lisäksi hän kertoo miten ja miksi #redux luotiin!”
Sandrino Di Mattia

“Kynnän läpi @dan_abramov'n 'Alkuun Reduxin kanssa' - on uskomatonta kuinka konseptit ovat yksinkertaisempia ymmärtää videolta katsellen.”
Chris Dhanaraj

“Tämä @dan_abramov'n videosarja Reduxista @eggheadio:ssa on loistava!”
Eddie Zaneski

“Tulin nimen hehkutuksen vuoksi. Pysyin kallion lujien perusteiden vuoksi. (Kiitos ja hyvää työtä @dan_abramov sekä @eggheadio!)”
Dan

“Tämä videosarja Reduxista @dan_abramov'n toimesta räjäyttää tajuntaani toistuvasti - pittää refaktoroida rankasti”
Laurence Roberts

Joten mitä vielä odotat?

Katso 30 ilmaista videota! (englanniksi)

Jos pidit kurssista, niin harkitsethan Eggheadin tukemista alkamalla tilaajaksi. Tilaajat saavat pääsyn lähdekoodiin jokaisessa videossani, sekä pääsyn lukuisiin muihin kehittyneisiin oppitunteihin muista aiheissa mukaanlukien JavaScript, React, Angular ja monta muuta. Monet Eggheadin kouluttajista ovat myös avoimen lähdekoodin kirjastojen tekijöitä, joten tilaus on hieno tapa kiittää heitä heidän tekemästään työstä.

Keskustelu

Liity #redux-kanavalle Reactiflux Discord-yhteisössä.

Kiitokset

• Elm-arkkitehtuurille upeasta johdatuksesta tilanmallintamiseen pelkistimiä käyttäen;
• Tietokannan kääntö nurinkurin räjäytti mieleni;
• Kehittäminen ClojureScriptillä käyttäen Figwheeliä vakuutti minut siitä, että uudelleenevaluoinnin tulisi toimia suorilta;
• Webpackille välittömästä moduulin korvauksesta;
• Flummox opetti minulle lähestymisen Fluxiin välttäen turhaan pohjustuskoodiin ja singletoneihin tukeutumisen;
• disto toimi näytteenä säilöjen välittömästä uudelleenlatauksesta;
• NuclearJS osoitti sen, että tämänkaltainen arkkitehtuuri voi olla suorituskykyinen;
• Om popularisoi idean yksittäisestä lähdetilasta;
• Cycle osoitti kuinka funktio on usein paras työkalu;
• Reactille käytännöllisestä innovoinnista.

Erityiskiitokset Jamie Patonille redux-pakettinimen luovuttamisesta NPM:ssä.

Muutosloki

Tämä projekti noudattaa semanttista versiointia.
Jokainen julkaisu migraatio-ohjeineen on dokumentoitu Githubin Releases-sivulla.

Tukijat

Työ Reduxin eteen on yhteisön rahoittama.
Tässä osa mahtavista yrityksistä, jotka tekivät työn mahdolliseksi:

• Webflow
• Chess iX

Katso koko lista Reduxin tukijoista.

Lisenssi

MIT