why start i use redux toolkit? why not classic redux?
Source: Dev.to
Introduction
When I first started learning Redux, I thought the boilerplate was just how things worked. Managing a simple feature required:
- Action types
- Action creators
- Reducers
- Store configuration
At first it felt “professional”, but after a few days it became repetitive and exhausting.
Problems with Classic Redux
For a single feature I was jumping between multiple files:
actions.js– writing constants and functionsreducers.js– writing switch casesstore.js– configuring the store
The same patterns repeated across the codebase, making even small state updates feel heavyweight.
Redux Toolkit: A Modern Approach
Redux Toolkit (RTK) removes unnecessary complexity while keeping Redux’s power. Two core functions changed my understanding completely: configureStore and createSlice.
configureStore
Classic Redux
import { createStore, combineReducers, applyMiddleware } from 'redux';
const store = createStore(
combineReducers({ /* reducers */ }),
applyMiddleware(/* middleware */)
);
Redux Toolkit
import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers';
const store = configureStore({
reducer: rootReducer,
});
All internal setup (middleware, DevTools integration, etc.) is handled automatically.
createSlice
Classic Redux
// action types
const INCREMENT = 'counter/increment';
// action creators
export const increment = () => ({ type: INCREMENT });
// reducer
export default function counterReducer(state = { value: 0 }, action) {
switch (action.type) {
case INCREMENT:
return { ...state, value: state.value + 1 };
default:
return state;
}
}
Redux Toolkit
import { createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment(state) {
state.value++;
},
},
});
export const { increment } = counterSlice.actions;
export default counterSlice.reducer;
createSlice automatically generates action creators and the reducer, replacing three to four separate pieces of code with a single, concise definition.
Migration Strategy
You don’t need to switch everything at once. Classic Redux and Redux Toolkit can coexist in the same project, both connecting to React in the usual way. This allows a gradual migration without pressure.
Conclusion & Advice
Understanding Redux Toolkit makes Redux feel simple and practical:
- Less boilerplate
- No switch statements scattered across files
- All related logic lives together
If you’re learning Redux now, don’t stop at classic Redux. Start with Redux Toolkit early—it will save you time, energy, and a lot of confusion.