React
Använda ReactJS på Flux-sätt

Android CSS firebase HTML JavaScript jQuery meteor Node.js react-native TypeScript
Sök…


Introduktion

Det är mycket praktiskt att använda Flux-metoden, när din applikation med ReactJS på frontend planeras växa, på grund av begränsade strukturer och lite ny kod för att göra tillståndsändringar i runtime lättare.

Anmärkningar

Flux är applikationsarkitekturen som Facebook använder för att bygga webbapplikationer på klientsidan. Det kompletterar Reacts komponerbara bildkomponenter genom att använda ett enkelriktat dataflöde. Det är mer ett mönster snarare än ett formellt ramverk, och du kan börja använda Flux omedelbart utan mycket ny kod.

Flux-applikationer har tre huvuddelar: avsändaren , butikerna och vyerna (React-komponenter). Dessa bör inte förväxlas med Model-View-Controller. Controllers finns i en Flux-applikation, men de är controller-vyer - vyer som ofta finns högst upp i hierarkin som hämtar data från butikerna och skickar dessa data till sina barn. Dessutom används actionskapare - hjälpmedelsmetoder - för att stödja ett semantiskt API som beskriver alla ändringar som är möjliga i applikationen. Det kan vara användbart att tänka på dem som en fjärde del av Flux-uppdateringscykeln.

Flux undviker MVC till förmån för ett enkelriktat dataflöde. När en användare interagerar med en React-vy sprider vyn en åtgärd genom en central avsändare, till de olika butikerna som har programmets data och affärslogik, som uppdaterar alla vyer som påverkas. Detta fungerar särskilt bra med Reacts deklarativa programmeringsstil, som gör det möjligt för butiken att skicka uppdateringar utan att ange hur man ska överföra vyer mellan stater.

Data flöde

Detta är en sammanfattning av en omfattande översikt .

Fluxmönstret antar användning av enkelriktad dataflöde.

  1. Action - enkel objekt som beskriver action type och andra indata.

  2. Dispatcher - enkel actionmottagare och återuppringningskontroller. Föreställ dig att det är det centrala navet i din ansökan.

  3. Store - innehåller applikationstillstånd och logik. Den registrerar återuppringning i avsändaren och avger händelse för att se när ändring till dataskiktet har inträffat.

  4. Visa - Reagera komponent som tar emot ändringshändelse och data från butik. Det orsakar återgivning när något ändras.

    Från Flux-dataflöde kan visningar också skapa åtgärder och skicka dem till avsändaren för användarinteraktioner.

åter

För att göra det mer tydligt kan vi börja från slutet.

  • Olika React-komponenter ( vyer ) får data från olika butiker om gjorda ändringar.

    Få komponenter kan kallas controller-vyer , orsakar att de tillhandahåller limkoden för att hämta data från butikerna och för att skicka data ner efter deras ättlingar. Controller-vyer representerar alla viktiga delar av sidan.

  • Butiker kan anmärkas som återuppringningar som jämför åtgärdstyp och annan inmatningsdata för din affärslogik.

  • Dispatcher är vanliga åtgärder mottagare och återuppringning behållare.

  • Åtgärder är ingenting än enkla föremål med behov type egenskap.

    Tidigare vill du använda konstanter för handlingstyper och hjälpmetoder (kallas actionskapare ).



Modified text is an extract of the original Stack Overflow Documentation
Licensierat under CC BY-SA 3.0
Inte anslutet till Stack Overflow