Redux Toolkit: Vereinfachte State-Verwaltung in React

Redux ist ein beliebtes State-Management-Tool im React-Ökosystem. Die Verwendung von traditionellem Redux wird jedoch oft als umständlich und komplex empfunden, da die Erstellung eines Stores, vieler Dateien mit sich wiederholendem Code und das Fehlen klarer Richtlinien für die Logikimplementierung erforderlich sind. Redux Toolkit wurde entwickelt, um diese Probleme zu lösen. Vom ReduxJS-Team selbst entwickelt, ermöglicht Redux Toolkit das Schreiben von Redux-Code, der schnell, vollständig und nach einheitlichen Standards ist.

Redux Toolkit vereinfacht nicht nur die Store-Erstellung, sondern integriert auch einige Middleware und Redux Devtools zum Debuggen und Verfolgen von State-Updates. Dies spart Entwicklern Zeit und Mühe.

Die Deklaration von Action-Types im traditionellen Redux ist ziemlich langwierig, und dieser Wert wird nur beim Erstellen von Actions und im Reducer verwendet. Redux Toolkit bietet die Funktion createAction, um Actions kürzer zu erstellen. Diese Funktion akzeptiert einen String und gibt eine Funktion zurück, die eine Action mit dem übergebenen String als Type initialisiert.

import { createAction } from '@reduxjs/toolkit';
const increment = createAction('INCREMENT');
console.log(increment()); // {type: "INCREMENT"}

Darüber hinaus ermöglicht createAction den einfachen Zugriff auf den Type der Action, was weiteren Code spart:

console.log(increment.toString()); // "INCREMENT"
console.log(increment.type); // "INCREMENT"

Redux Toolkit bietet auch die Funktion createReducer, um Reducer einfacher und intuitiver als mit der herkömmlichen Methode zu erstellen. createReducer ermöglicht die Initialisierung eines Reducers mit intuitiver Logik als Referenzobjekt, wobei jeder Schlüssel ein Type und jeder Wert eine Reducer-Funktion ist.

import { createReducer } from '@reduxjs/toolkit'
const increment = createAction('INCREMENT')
const decrement = createAction('DECREMENT')

const initialState = {
  count: 0
}

const counterReducer = createReducer(initialState, {
  [increment]: (state) => ({ count: state.count + 1 }),
  [decrement]: (state) => ({ count: state.count - 1 })
})

createReducer akzeptiert zwei Parameter: den initialen State-Wert und das Objekt, mit dem der Reducer den State überwacht und aktualisiert. Dank der Computed-Property-Funktion von ES6 können wir den obigen Code kürzer schreiben:

const counterReducer = createReducer(initialState, {
  [increment]: (state) => ({ count: state.count + 1 }),
  [decrement]: (state ) => ({ count: state.count - 1 })
})

Dank createAction und createReducer ist das Erstellen eines Stores in Redux Toolkit viel einfacher und verständlicher als in traditionellem Redux. Der Code ist klar organisiert, lesbar und wartbar. Redux Toolkit vereinfacht die State-Verwaltung in React-Anwendungen, sodass sich Entwickler auf die Geschäftslogik anstatt auf Boilerplate-Code konzentrieren können.

// store.js
import { configureStore, createAction, createReducer } from '@reduxjs/toolkit';

// actions
const increment = createAction('increment')
const decrement = createAction('decrement')

const initialState = {
  count: 0
}

const rootReducer = createReducer(initialState, {
  [increment]: (state) => ({count: state.count + 1}),
  [decrement]: (state) =>  ({count: state.count - 1})
})


const store = configureStore({
  reducer: rootReducer
})

export default store