Redux toolkit - how is it different to redux only

Redux Toolkit (RTK) is the official, recommended approach for writing Redux logic. It provides a set of tools and best practices to simplify and standardize the development of Redux applications. Redux Toolkit addresses many of the common concerns and boilerplate code associated with standard Redux by providing a more efficient and user-friendly API.

Key Features of Redux Toolkit

1. Simplified Configuration:

   • configureStore(): Simplifies store creation and includes good default middleware like redux-thunk for asynchronous logic.
   • Automatically sets up the Redux DevTools Extension.

2. Immutable Updates and Reducers:

   • createSlice(): Automatically generates action creators and action types, and allows writing immutable update logic using Immer.
   • createReducer(): Helps create reducers with simpler syntax.

3. Async Logic with Thunks:

   • createAsyncThunk(): Simplifies writing and managing asynchronous logic with built-in support for dispatching lifecycle actions (pending, fulfilled, rejected).

4. Better Typing:

   • Improved TypeScript support with type inference for action creators and reducers.

5. Convenience Utilities:

   • createEntityAdapter(): Provides standardized ways to manage normalized state structures for collections of items.

Key Differences Between Redux Toolkit and Standard Redux

1. Boilerplate Reduction:

   • Redux Only: Requires manual setup of actions, action creators, reducers, and store configuration, which can be verbose and repetitive.
   • Redux Toolkit: Reduces boilerplate by providing utilities like createSlice() and configureStore(), which automate much of this setup.

2. Ease of Use:

   • Redux Only: More complex to set up and requires more boilerplate code for standard tasks.
   • Redux Toolkit: Designed to be more developer-friendly with utilities that streamline common tasks and enforce best practices.

3. Immutable Update Logic:

   • Redux Only: Requires careful manual handling of immutable updates in reducers.
   • Redux Toolkit: Uses Immer under the hood to allow writing "mutating" logic that actually performs immutable updates.

4. Async Logic:

   • Redux Only: Often requires additional middleware like redux-thunk or redux-saga and custom setup for handling asynchronous actions.
   • Redux Toolkit: Includes createAsyncThunk() for handling async logic with lifecycle action dispatches out of the box.

5. Redux DevTools Integration:

   • Redux Only: Requires manual setup to integrate Redux DevTools.
   • Redux Toolkit: Automatically configures Redux DevTools for easier debugging.

Example Comparison

Redux Only Example:

// actions.js
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';

export const increment = () => ({ type: INCREMENT });
export const decrement = () => ({ type: DECREMENT });

// reducer.js
const initialState = { value: 0 };

export const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case INCREMENT:
      return { value: state.value + 1 };
    case DECREMENT:
      return { value: state.value - 1 };
    default:
      return state;
  }
};

// store.js
import { createStore } from 'redux';
import { counterReducer } from './reducer';

const store = createStore(counterReducer);

export default store;

Redux Toolkit Example:

// counterSlice.js
import { createSlice, configureStore } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1; },
    decrement: (state) => { state.value -= 1; }
  }
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

// store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer
  }
});

export default store;