Summary  
This chapter introduces reducers as pure functions that define state transitions based on dispatched actions and demonstrates using a builder-pattern API (createReducer) to concisely specify how different actions update state.

General domain of usage  
Application state management

## Teori
Reducers er rene funktioner, der angiver, hvordan tilstanden skal ændres som reaktion på udsendte handlinger. Ved at tage den nuværende tilstand og en handling som parametre returnerer reducers den nye tilstand for applikationen.

## Praksis
I projektets `reducers`-mappe findes filen `counterReducer.js`, hvor vi definerer reduceren til vores tællerfunktionalitet:
```js
import { createReducer } from "@reduxjs/toolkit";
import { increment, decrement } from "../actions/counterAction.js";

const initialState = 0;

const counterReducer = createReducer(initialState,
  (builder) => {
    builder
      .addCase(increment, (state) => state + 1)
      .addCase(decrement, (state) => state - 1);
});

export default counterReducer;
```
**Kodeforklaring:**
- Linje 1: Importér funktionen `createReducer` fra pakken `@reduxjs/toolkit`. Denne funktion bruges til at oprette reducers i Redux;
- Linje 2: Importér action creators `increment` og `decrement` fra filen `../actions/counterAction.js`. Disse action creators bruges til at definere de handlinger, som reduceren skal håndtere;
- Linje 4: Sæt konstanten `initialState` til `0`. Dette repræsenterer den indledende værdi af tælleren i Redux store;
- Linje 6: Brug funktionen `createReducer` til at definere `counterReducer`;
- Linje 6-11: Funktionen `createReducer` tager to argumenter: `initialState` og en callback-funktion, der definerer, hvordan tilstanden skal opdateres baseret på udsendte handlinger;
- Linje 7: Brug objektet `builder` til at definere cases for forskellige handlinger inde i callback-funktionen;
- Linje 9, 10: Brug metoden `addCase` på `builder`-objektet til at definere, hvordan tilstanden skal opdateres, når specifikke handlinger som `increment` og `decrement` udsendes;
- Linje 9, 10: Callback-funktionen inde i `addCase` tager den nuværende tilstand (`state`) som argument og returnerer den nye tilstand efter at have anvendt den tilsvarende handling;
- I dette tilfælde, når handlingen `increment` udsendes, øges tilstanden med `1`; når handlingen `decrement` udsendes, mindskes tilstanden med `1`;
- Linje 13: Til sidst eksporteres `counterReducer` som standardeksporten af modulet.

> Bemærk
>
> Sammenfattende vil `counterReducer` håndtere de udsendte handlinger og opdatere tællertilstanden tilsvarende i Redux store.

Hvilken funktion bruges til at oprette reducers i Redux?

Hvad er formålet med `builder`-objektet i koden?

Hvad sker der med staten, når `increment`-actionen dispatches?

Opdag styrken ved Redux Toolkit i samspil med React, og styrk dine færdigheder inden for state management. Dette kursus giver en omfattende introduktion til Redux Toolkit, et kraftfuldt bibliotek til håndtering af state. Lær at forenkle din Redux-opsætning, simplificere kompleks state-logik og skabe effektive, skalerbare React-applikationer.

Udforsk de grundlæggende koncepter inden for state management og lær, hvordan du udnytter Redux Toolkit. Vi guider dig gennem installationsprocessen og hjælper dig med at oprette dit første React Redux Toolkit-projekt. Derudover møder du en udfordring, der tester din forståelse og dine færdigheder.

Undersøgelse af Redux-integration med React-applikationer, med fokus på kernekoncepter: actions, reducers og Redux store. Indeholder praktiske eksempler og kodeforklaringer til konfiguration af en store, oprettelse af reducers og tilkobling af React-komponenter via hooks som useSelector og useDispatch.

Styrk dine færdigheder inden for state management. I denne praktiske workshop arbejder du med virkelighedsnære udfordringer og opnår praktisk erfaring med Redux Toolkit til effektiv applikationsudvikling.

Forståelse af Reduceres Rolle

Awesome!

Forståelse af Reduceres Rolle