's Picture

Ordning och reda med ReduxJs

Postad av Emil Cardell

Kraven på webbapplikationer ökar och mängden funktioner de ska klara av växer för varje dag som går. De ska hantera många olika interaktioner och mängden data bara ökar exponentiellt. Det blir svårare att förutse hur gränssnittet kommer upplevas.

I en av våra applikationer blev det tydligt att vi hade problem med olika interaktioner. När en användare klickade på ett element kunde det påverka delar av applikationen som vi inte kunde förutse. Resultatet blev en instabil användarupplevelse.

För att få kontroll på vår applikation hade vi som mål att alla interaktioner skulle samlas på samma plats, en källa som innehåller sanningen som alla vyer ska utgå ifrån. Vårt val föll på ReduxJS [ http://redux.js.org/ ].

Idag flyttas logiken mer och mer till klienten och in i browsern från servern. Det florerar mängder av nya vyramverk som exempelvis ReactJs, AngularJs 2 och RiotJs som ökar i popularitet vilket gör det enkelt att bygga en "single page"-applikation (SPA). Den stora utmaningen framöver handlar om hur man separerar vylogik och applikationslogik. Ändras den underliggande datan ska den plockas upp av alla vyer som använder den.

Vad är ReduxJs?

ReduxJs definierar sig som en förutsägbar tillståndshanterare. Ett kodbibliotek för att bygga tillståndsmaskiner. ReduxJs tar interaktioner och händelser, så kallade "actions" som är allt från musklick till svar från ajaxförfrågningar och beräknar fram ett tillstånd. Andra delar av applikationen kan välja att prenumerera på tillståndsuppdateringar och kan då uppdatera sin vy om datan som behövs har uppdaterats. Här är de grundläggande koncepten:

1. State

Det beräknade resultatet av alla händelser. Den samlade sanningen som är immutable, oföränderlig. Man kan alltid få nuvarande versionen genom att anropa.

store.getCurrentState()

2. Store

Store är ett lager för att få tillgång till state, men det är också spindeln i nätet som håller ordning på vilka reducers som ska användas för att beräkna "state". För att beräkna ett nytt state skickas en action till Store med hjälp av dispatch()-metoden. För att ta reda på när state har förändrats finns subscribe()-metoden på Store som tar emot en callback som körs när det finns en ny version av state.

store.subscribe(() => {
     console.log(store.getCurrentState())
})

3. Actions

Allt som händer i systemet är en "action". Actions är synkrona och beskriver vad som ska påverka applikationstillståndet. Actions kan bara appliceras en och en för att undvika ett konkurrenstillstånd (race condition). Datastrukturen för en action måste innehålla egenskapen "type" och den data som behövs för att kunna uppdatera tillståndet.

Vill man göra ajax request eller eller anropa asynkrona funktioner måste man använda middleware, en typ av plugin, som Thunk eller ReduxPromise som skapar flera actions t.ex. när ett request görs och när man får ett svar.

{ type: "clickedOnButton", actionData: someData }

4. Reducers

Reducers är kärnan i ReduxJs och skapar ett nytt state genom att reagera på actions som skickas. Reducers uttrycks som en funktion som tar emot ett state och en action och skickar tillbaks ett nytt state. Reducers går att kombinera på olika sätt och flera reducers kan behandla samma actions.

const clickedOnButton = (state, action) => {
     state.latestActionType = action.type;
     return state;
}

När bör man använda ReduxJs?

ReduxJs är ett kraftfullt val när man bygger en applikation där användaren ska kunna interagera med användargränssnittet på många olika sätt. Tänk på att ReduxJS lägger till ett lager av komplexitet och har man inte flera olika komponenter eller vyer kommer man försvåra sitt arbete.

Om du funderar på att bygga något eget är det bra att känna till att det finns många bra verktyg, som till exempel chrome extensions och inspelare som gör det enkelt att se exakt vad som händer i applikationen genom att spela in och sedan spela upp alla interaktioner. På det sättet kan man se hur ens applikation ser ut i olika states.

PS. Missa inte vår nästa bloggpost, följ oss på Twitter!

Till startsidan