Redux Toolkit (RTK) is the official, recommended way to write Redux logic. It keeps Redux’s core ideas while removing unnecessary boilerplate and enforcing best practices.

Core Concepts

Flow: UI → Action → Reducer → Store → UI

1. Define a slice

const counterSlice = createSlice({
  name: "counter",
  initialState: { value: 0 },
  reducers: {
    increment(state) {
      state.value++;
    },
  },
});

RTK auto-creates:

• Action types → "counter/increment"
• Action creators → increment()

2. Configure the store

const store = configureStore({
  reducer: { counter: counterSlice.reducer },
});

RTK:

• Combines reducers
• Adds default middleware
• Enables DevTools

3. UI dispatches actions

dispatch(counterSlice.actions.increment());

4. Reducer updates state (via Immer)

state.value++; // looks mutable, stays immutable

5. Store saves new state → UI re-renders

Components subscribed with useSelector get updated automatically.

Handle Async Logic

Dispatch thunk → pending → (API call) → fulfilled OR rejected → state update → UI re-render

// dispatch(fetchData());
const slice = createSlice({
  name: "data",
  initialState: { data: null, loading: false, error: null },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchData.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(fetchData.fulfilled, (state, action) => {
        state.loading = false;
        state.data = action.payload;
      })
      .addCase(fetchData.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message || "Failed to fetch";
      });
  },
});

RTK auto-dispatches:

1. data/fetch/pending
2. data/fetch/fulfilled
3. data/fetch/rejected

Handled in slice extraReducers.

Redux-Saga

Redux-Saga is a Redux middleware for handling complex async side effects like API calls, delays, retries, concurrency, and cancellation.

It uses generator functions (function*) to:

• Pause/resume with yield
• Write async logic in a sync-looking way
• Control concurrency, cancellation, sequencing

Core Effects

1. call(fn, ...args)

• Runs a function (e.g., API call)
• Blocking: waits for result

2. put(action)

• Dispatches a Redux action

3. takeLatest

• Runs only the latest
• Cancels previous

4. race

• Runs effects in parallel
• Returns result of the first to finish

5. all

• Runs effects in parallel
• Waits for all to finish

6. fork(fn, ...args)

• Runs a function in the background
• Non-blocking: doesn’t wait for result