Kaip įdiegti „Redux“ 24 eilutėse „JavaScript“

90% suvažiavimas, 10% biblioteka.

Redux yra viena iš svarbiausių kada nors sukurtų „JavaScript“ bibliotekų. Įkvėptas ankstesnio meno, pavyzdžiui, „Flux“ ir „Elm“, Redux'as įtraukė „JavaScript“ funkcinį programavimą į žemėlapį, įvesdamas keičiamo dydžio trijų paprastų taškų architektūrą.

Jei esate „Redux“ naujokas, pirmiausia turėtumėte perskaityti oficialius dokumentus.

Reduxas dažniausiai yra konvencija

Apsvarstykite šią paprastą skaitiklio programą, naudojančią „Redux“ architektūrą. Jei norite šokti į priekį, patikrinkite „Github“ repo.

„redux-counter-app-demo“

Valstybė gyvena viename medyje

Programos būsena atrodo taip.

const initialState = { count: 0 }; 

Veiksmai skelbia būsenos pokyčius

Pagal Reduxo konvenciją tiesiogiai nemodifikuoju (nemutifikuoju) būsenos.

// DON'T do this in a Redux app state.count = 1; 

Vietoj to aš sukuriu visus veiksmus, kuriuos vartotojas gali panaudoti programoje.

const actions = { increment: { type: 'INCREMENT' }, decrement: { type: 'DECREMENT' } }; 

Reduktorius aiškina veiksmus ir atnaujinimų būseną

Paskutinis architektūrinis kūrinys reikalauja reduktoriaus, grynos funkcijos, kuri grąžina naują jūsų būsenos kopiją, pagrįstą ankstesne būsena ir veiksmu.

  • Jei incrementatleidžiama, prieaugis state.count.
  • Jei decrementatleidžiama, mažinimas state.count.
const countReducer = (state = initialState, action) => { switch (action.type) { case actions.increment.type: return { count: state.count + 1 }; case actions.decrement.type: return { count: state.count - 1 }; default: return state; } }; 

Kol kas nėra Reduxo

Ar pastebėjote, kad mes dar nepalietėme „Redux“ bibliotekos? Ką tik sukūrėme keletą objektų ir funkciją. Tai turiu omenyje sakydamas „dažniausiai sutartis“, 90% Redux nereikalauja Redux!

Įgyvendinkime „Redux“

Norėdami naudoti šią architektūrą, turime ją prijungti prie parduotuvės. Įgyvendinsime tik vieną funkciją createStore.

Jis naudojamas taip.

import { createStore } from 'redux' const store = createStore(countReducer); store.subscribe(() => { console.log(store.getState()); }); store.dispatch(actions.increment); // logs { count: 1 } store.dispatch(actions.increment); // logs { count: 2 } store.dispatch(actions.decrement); // logs { count: 1 } 

Štai čia mūsų pradinė katilinė. Mums reikės klausytojų sąrašo ir pradinės būsenos, kurią pateikia reduktorius.

const createStore = (yourReducer) => { let listeners = []; let currentState = yourReducer(undefined, {}); } 

Kai kas nors užsisako mūsų parduotuvę, jis įtraukiamas į listenersmasyvą. Tai svarbu, nes kiekvieną kartą, kai kas nors išsiunčia veiksmą, apie tai listenersturi būti pranešama vienu metu.

Skambinus yourReducersu undefinedir tuščiu objektu grąžinama aukščiau initialStateįdiegta. Tai suteikia mums tinkamą vertę grįžti, kai skambiname store.getState(). Kalbėdami apie tai, sukurkime tą metodą.

store.getState ()

Tai funkcija, kuri grąžina naujausią būseną iš parduotuvės. Mums to reikės atnaujinti vartotojo sąsają kiekvieną kartą, kai vartotojas spustelės mygtuką.

const createStore = (yourReducer) => { let listeners = []; let currentState = yourReducer(undefined, {}); return { getState: () => currentState }; } 

store.dispatch (veiksmas)

Tai yra funkcija, kuriai actionkaip parametras priskiriamas. Ji maitina, kad actionir currentStateį yourReducergauti naują būseną. Tada dispatchpraneša visiems užsiprenumeravusiems store.

const createStore = (yourReducer) => { let listeners = []; let currentState = yourReducer(undefined, {}); return { getState: () => currentState, dispatch: (action) => { currentState = yourReducer(currentState, action); listeners.forEach((listener) => { listener(); }); } }; }; 

store.subscribe (klausytojas)

Tai funkcija, leidžianti jums pranešti, kai parduotuvė gauna veiksmą. Gerai store.getState()čia naudoti norint gauti naujausią būseną ir atnaujinti vartotojo sąsają.

const createStore = (yourReducer) => { let listeners = []; let currentState = yourReducer(undefined, {}); return { getState: () => currentState, dispatch: (action) => { currentState = yourReducer(currentState, action); listeners.forEach((listener) => { listener(); }); }, subscribe: (newListener) => { listeners.push(newListener); const unsubscribe = () => { listeners = listeners.filter((l) => l !== newListener); }; return unsubscribe; } }; }; 

subscribepateikia funkciją, unsubscribekurią galite vadinti, kai jums nebėra įdomu klausytis parduotuvės naujinių.

Visi kartu dabar

Prijunkime tai prie savo mygtukų ir peržiūrėkime galutinį šaltinio kodą.

// simplified createStore function const createStore = (yourReducer) => { let listeners = []; let currentState = yourReducer(undefined, {}); return { getState: () => currentState, dispatch: (action) => { currentState = yourReducer(currentState, action); listeners.forEach((listener) => { listener(); }); }, subscribe: (newListener) => { listeners.push(newListener); const unsubscribe = () => { listeners = listeners.filter((l) => l !== newListener); }; return unsubscribe; } }; }; // Redux architecture pieces const initialState = { count: 0 }; const actions = { increment: { type: 'INCREMENT' }, decrement: { type: 'DECREMENT' } }; const countReducer = (state = initialState, action) => { switch (action.type) { case actions.increment.type: return { count: state.count + 1 }; case actions.decrement.type: return { count: state.count - 1 }; default: return state; } }; const store = createStore(countReducer); // DOM elements const incrementButton = document.querySelector('.increment'); const decrementButton = document.querySelector('.decrement'); // Wire click events to actions incrementButton.addEventListener('click', () => { store.dispatch(actions.increment); }); decrementButton.addEventListener('click', () => { store.dispatch(actions.decrement); }); // Initialize UI display const counterDisplay = document.querySelector('h1'); counterDisplay.innerHTML = parseInt(initialState.count); // Update UI when an action fires store.subscribe(() => { const state = store.getState(); counterDisplay.innerHTML = parseInt(state.count); }); 

Ir dar kartą pateikiame mūsų galutinę vartotojo sąsają.

„redux-counter-app-demo“

Jei jus domina mano naudojamas HTML / CSS, čia dar kartą pateikiama „GitHub“ repo!

Norite nemokamo koučingo?

Jei norite suplanuoti nemokamą skambutį ir aptarti „Front-End“ plėtros klausimus, susijusius su kodu, interviu, karjera ar dar kuo nors, sekite mane „Twitter“ ir „DM me“.

Po to, jei jums patiks mūsų pirmasis susitikimas, galime aptarti nuolatinį koučingą, kuris padės pasiekti jūsų „Front-End“ plėtros tikslus!

Dėvėkite savo indėlį

Jei koduojate kiekvieną dieną, ypač jei įsipareigojate „GitHub“, ar nebūtų šaunu nešioti tą įnašų žemėlapį, kad visi matytų?

„Gitmerch.com“ leidžia atspausdinti „GitHub“ indėlio žemėlapio marškinėlius! Naudokite kodą „ Yazeed “ atsiskaitant, kad gautumėte nuolaidą.

„git-merch-screenshot-1-1“

„git-merch-screenshot-2-1“

Ačiū, kad skaitėte

Norėdami gauti daugiau tokio turinio, apsilankykite //yazeedb.com!

Iki kito karto!