Redux Toolkit: Eenvoudig state management in React

Redux is een populaire state management tool in het React ecosysteem. Traditioneel Redux staat echter bekend om zijn complexiteit en de vele stappen die nodig zijn om een store aan te maken, met veel repetitieve code en een gebrek aan duidelijke richtlijnen. Redux Toolkit is ontwikkeld om deze problemen op te lossen. Gemaakt door het ReduxJS team, maakt Redux Toolkit het schrijven van Redux code sneller, completer en volgens consistente standaarden.

Redux Toolkit vereenvoudigt niet alleen het creëren van een store, maar integreert ook middleware en Redux Devtools voor debugging en het volgen van state updates. Dit bespaart ontwikkelaars tijd en moeite.

Het declareren van action types in traditioneel Redux is omslachtig en de waarde wordt alleen gebruikt bij het creëren van actions en in de reducer. Redux Toolkit biedt de functie createAction om actions beknopter te definiëren. Deze functie neemt een string als argument en retourneert een functie die een action creëert met de gegeven string als type.

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

Bovendien maakt createAction het eenvoudig om het type van een action op te vragen, wat extra code bespaart:

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

Redux Toolkit biedt ook de functie createReducer om reducers eenvoudiger en intuïtiever te maken dan de traditionele manier. createReducer laat je een reducer initialiseren met een object als referentie, waarbij elke key een type is en de value een reducer functie.

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 neemt twee parameters: de initiële state waarde en een object waarmee de reducer state updates kan volgen en verwerken. Gebruikmakend van computed properties van ES6, kunnen we bovenstaande code verkorter schrijven:

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

Dankzij createAction en createReducer is het creëren van een store in Redux Toolkit veel eenvoudiger en begrijpelijker dan in traditioneel Redux. De code is overzichtelijker, leesbaarder en beter te onderhouden. Redux Toolkit vereenvoudigt state management in React applicaties, waardoor ontwikkelaars zich kunnen focussen op de business logica in plaats van boilerplate code.

// 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