Hoe Redux is Veranderd en Waarom Het Nog Steeds aan Nieuwe Projecten Wordt Toegevoegd

Herinner je de tijd dat een simpele Redux-teller het maken van drie aparte bestanden vereiste, een dozijn constanten moest declareren en een enorme switch-case in de reducer moest schrijven? Hierdoor zijn duizenden ontwikkelaars de library gaan haten. Maar Redux is niet langer wat het in 2015 was.

De ontwikkelaars hebben het probleem tijdig onderkend en Redux Toolkit (RTK) uitgebracht. Tegenwoordig is het de standaard voor het werken met de library en heeft het vrijwel alles weggenomen waar Redux eerder voor werd bekritiseerd.

Waarom Zou Je Eigenlijk een Global State Manager Nodig Hebben

In kleine React-applicaties kun je gemakkelijk uit de voeten met standaard prop-doorgifte of ingebouwde React Context. Problemen ontstaan wanneer het project groeit. Wanneer data uit één formulier tegelijkertijd een sidebar, de site-header moet bijwerken en analytics moet verzenden, wordt de prop-keten een chaos.

Redux houdt de applicatiestate in één object (store). Je wijzigt dit object niet direct. In plaats daarvan dispatch je een action, en pure functies, reducers, berekenen de nieuwe state op basis van de oude.

Deze aanpak biedt duidelijke voorspelbaarheid. Als er iets breekt in de applicatie, kun je via Redux DevTools de volledige geschiedenis van state-wijzigingen bekijken en terugspoelen, waarbij je gebruikersacties stap voor stap volgt.

Hoe Redux Toolkit het Leven Gemakkelijker Heeft Gemaakt

Voorheen moest je, om één veld bij te werken, handmatig object-onveranderlijkheid bijhouden, wat omslachtige spreads creëerde.

Redux Toolkit heeft Immer ingebouwd. Nu wordt code binnen reducers geschreven alsof je state direct muteert, en de library converteert dit automatisch naar een veilige onveranderlijke update.

Laten we een basisvoorbeeld van een teller bekijken:

import { createSlice, configureStore } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    incremented: state => {
      // Immer улавливает "мутацию" и создает новое состояние
      state.value += 1
    },
    decremented: state => {
      state.value -= 1
    }
  }
})

export const { incremented, decremented } = counterSlice.actions

const store = configureStore({
  reducer: counterSlice.reducer
})

store.subscribe(() => console.log(store.getState()))

store.dispatch(incremented()) // { value: 1 }
store.dispatch(incremented()) // { value: 2 }
store.dispatch(decremented()) // { value: 1 }

Geen aparte bestanden met action types. De createSlice functie heeft zowel de reducer als action generators voor je aangemaakt.

Wanneer Redux Nodig Is en Wanneer Je Er Beter Zonder Kunt

De maker van de library, Dan Abramov, schreef jaren geleden "You Might Not Need Redux". Dit advies is nog steeds relevant vandaag.

Redux komt van pas in specifieke situaties:

• Er is veel data die actief verandert over tijd en wordt gebruikt in verschillende delen van de applicatie.
• De state-update logica is complex of vereist strikte volgorde.
• Gemakkelijk debuggen met een transparante geschiedenis van alle events is nodig.
• Veel mensen werken aan het team, en een enkele duidelijke data-afhandelingspatroon is vereist.

Als je een eenvoudige applicatie hebt waarbij data slechts een paar niveaus diep hoeft te worden doorgegeven, is het de moeite niet waard om Redux hiervoor te gebruiken. Extra abstracties zullen de code alleen maar ingewikkelder maken.

Snel Aan de Slag

De gemakkelijkste manier om een project op te zetten is met Vite en een kant-en-klare Redux Toolkit en TypeScript template:

npx degit reduxjs/redux-templates/packages/vite-template-redux my-app

Voor Next.js is er een kant-en-klaar template van Vercel:

npx create-next-app --example with-redux my-app

Als je de library toevoegt aan een bestaand project, is het voldoende om twee packages te installeren:

npm install @reduxjs/toolkit react-redux

Conclusie

De Redux core weegt ongeveer 2 KB. De library is allang voorbij het tijdperk van eindeloze boilerplate code. Gecombineerd met Redux Toolkit krijg je een strikt en voorspelbaar hulpmiddel voor state management dat uitstekend werkt in grote projecten.