Najlepší spôsob, ako zostaviť svoju aplikáciu Redux

Tento článok je o tom, ako myslieť v Reduxe. Pokúsime sa pochopiť, ako môžeme túto úžasnú knižnicu využiť na to, aby bola naša aplikácia stabilnejšia, robustnejšia a udržiavateľnejšia. Je to jazykovo agnostické, ale rozsah našej pozornosti ponecháme na Redux with React.

Pre tých, ktorí Redux doteraz nepoužívali, budem citovať z dokumentov:

Redux je predvídateľný kontajner stavu pre aplikácie JavaScript.

Je to iba 2kb knižnica, ktorá rieši jeden z najväčších problémov pri údržbe veľkých aplikácií JavaScriptu: správa stavu.

Tento článok nie je o Reduxe, pretože už o ňom existuje veľa článkov. Ide skôr o to, ako by sme mali vizualizovať aplikáciu Redux a efektívne ju používať.

Povedzme, že budujeme aplikáciu elektronického obchodu, ktorá má niekoľko základných stránok, ako napríklad katalóg, podrobnosti o produkte a úspešnosť platieb.

Nižšie uvádzame drôtové rámy toho, ako by aplikácia vyzerala:

Takže tvorba architektúry v Reduxu znamená, že musíme aplikáciu vizualizovať ako jednu entitu a každá stránka je sub-entitou.

Aplikácia Redux má štyri fázy:

  1. Vizualizujte stavový strom
  2. Navrhnite si svoje reduktory
  3. Implementovať akcie
  4. Implementovať prezentáciu

Krok 1: Vizualizácia stavového stromu

Z drátových modelov vyššie navrhneme náš stavový strom.

Toto je najdôležitejší krok. Po dokončení vizualizácie nášho stavového stromu je implementácia techník Redux skutočne ľahká! Bodkované kruhy sú stavy, ktoré bude aplikácia zdieľať, plné kruhy sú stavy špecifické pre stránku.

Krok 2: Navrhnite si reduktory

V prípade, že by vás zaujímalo, čo to vlastne reduktor je, budem citovať priamo z dokumentov:

Reduktory určujú, ako sa mení stav aplikácie v reakcii na akcie odoslané do obchodu. Pamätajte, že akcie popisujú iba to , čo sa stalo , ale nepopisujú, ako sa mení stav aplikácie.

Každý z dôležitých štátov môže mať svoje vlastné reduktory. Neskôr ich môžeme skombinovať do jedného koreňového reduktora, ktorý nakoniec definuje úložisko (jediný zdroj pravdivosti aplikácie). To je miesto, kde prichádza skutočná moc: máte úplnú kontrolu nad svojimi stavmi a ich správaním. Obchod nič nezhliadne. Tichý pozorovateľ dáva pozor.

Pozrime sa na príklad, ako navrhnúť redukciu pomocou stromu stavu aplikácie, ktorý sme navrhli vyššie.

// Root Reducer const rootReducer = combineReducer({ header: headerReducer, login: loginReducer, footer: footerReducer, common: commonReducer, product: productReducer, catalog: catalogReducer, payment: paymentReducer });

Koreňový reduktor hovorí za všetko. Obsahuje všetko, čo obchod potrebuje o aplikácii vedieť.

Teraz sa pozrime na to, ako vyzerá hlavička podjednotky Reducer.

Pamätáte si, ako sme navrhli náš stav hlavičky?

// Header Reducer const headerReducer = combineReducer({ menu: menuReducer, search: searchReducer, location: locationReducer });

Náš reduktor je replikou toho, čo sme navrhli skôr v našom stavovom strome. Toto je sila vizualizácie.

Všimnite si, ako redukcia obsahuje viac redukcií. Nepotrebujeme vytvárať jeden obrovský reduktor. Dá sa ľahko rozdeliť na menšie reduktory, pretože každý z nich má svoju vlastnú identitu a má svoje vlastné špecifické operácie. To nám pomáha vytvárať oddelenie logiky, čo je veľmi dôležité pre údržbu veľkých aplikácií.

Poďme teda pochopiť, ako by sa mal nastaviť typický redukčný súbor, napríklad searchReducer.

// Search Reducer const initialState = { payload: [], isLoading: false, error: {}}; export function searchReducer( state=initialState, action ) { switch(action.type) { case FETCH_SEARCH_DATA: return { ...state, isLoading: true }; case FETCH_SEARCH_SUCCESS: return { ...state, payload: action.payload, isLoading: false }; case FETCH_SEARCH_FAILURE: return { ...state, error: action.error, isLoading: false }; case RESET_SEARCH_DATA: return { ...state, ...initialState } default: return state; } }

Tento vzor redukcie definuje možné zmeny v stave vyhľadávania, keď je volané rozhranie API vyhľadávania.

FETCH_SEARCH_DATA, FETCH_SEARCH_SUCCESS, FETCH_SEARCH_FAILURE, RESET_SEARCH_DATA

Všetky vyššie uvedené sú možné konštanty, ktoré určujú, aké možné akcie je možné vykonať.

Poznámka: Je dôležité udržiavať akciu RESET_SEARCH_DATA, pre prípad, že by sme potrebovali resetovať údaje počas odpojenia komponentu.

Krok 3: Implementácia akcií

Každá akcia, ktorá obsahuje volania API, v aplikácii zvyčajne prechádza tromi fázami.

  1. Stav načítania -> FETCH_SEARCH_DATA
  2. Úspech -> FETCH_SEARCH_SUCCESS
  3. Zlyhanie -> FETCH_SEARCH_FAILURE

Udržiavanie týchto typov akcií nám pomáha skontrolovať tok údajov, keď sa v našej aplikácii volá API.

Poďme sa ponoriť do kódu, aby sme pochopili, ako bude vyzerať typická akcia.

export function fetchSearchData(args) { return async (dispatch) => { // Initiate loading state dispatch({ type: FETCH_SEARCH_DATA }); try { // Call the API const result = await fetchSearchData( args.pageCount, args.itemsPerPage ); // Update payload in reducer on success dispatch({ type: FETCH_SEARCH_SUCCESS, payload: result, currentPage: args.pageCount }); } catch (err) { // Update error in reducer on failure dispatch({ type: FETCH_SEARCH_FAILURE, error: err }); } }; }

Všimnite si, ako obchod sleduje akcie pomocou akcií. Za to sú všetky zmeny v aplikácii zodpovedné.

Podobné akcie sú teda napísané pre každú zmenu reduktorov rôznych stavov.

Jednou z najväčších výhod Reduxu je abstrakcia každej akcie.

Krok 4: Implementácia prezentácie

import React, { Component } from 'react'; import { connect } from 'react-redux';; import fetchSearchData from './action/fetchSearchData'; import SearchData from './SearchData'; const Search = (props) => (  ); const mapStateToProps = (state) => ({ search: state.header.search.payload }); const mapDispatchToProps = { fetchSearchData}; export default connect(mapStateToProps, mapDispatchToProps)(Search)

As you can see, the presentation component is very simple and easy to understand.

Conclusion

I would like to mention some of the biggest benefits that I found using Redux:

  1. It certainly reduces code smell.
  2. Abstraction of code is easier to achieve.
  3. Redux also introduces us to other principles like immutability, functional programming, and many others.
  4. It allows you to visualise each and every action and track them with “time traveling.”

I hope this article helps you get a clearer picture of why Redux is truly awesome, and how we can utilise the power of visualisation to make maintainable applications.

Follow me on twitter to get more updates regarding new articles and to stay updated in latest frontend developments. Also share this article on twitter to help others know about it. Sharing is caring ^_^.

Niekoľko užitočných zdrojov

  1. //redux.js.org/
  2. //github.com/reduxjs/redux/blob/master/examples
  3. //medium.com/@rajaraodv/a-guide-for-building-a-react-redux-crud-app-7fe0b8943d0f#.c4yhhvk0d

Moje predchádzajúce články

  1. //medium.freecodecamp.org/how-to-use-redux-persist-when-migrating-your-states-a5dee16b5ead
  2. //codeburst.io/redux-observable-to-the-rescue-b27f07406cf2
  3. //codeburst.io/building-webapp-for-the-future-68d69054cbbd
  4. //codeburst.io/cors-story-of-requesting-twice-85219da7172d