Good Evening campers š
Part 1 --- Redux Toolkit (RTK)
Redux has been the standard for large-scale React applications for nearly a decade, centralizing application state in a single object called the "store." Instead of mutating this object directly, you dispatch "actions" that describe changes, and pure "reducers" compute the next state based on these actions. This unidirectional data flow simplifies debugging with Redux DevTools. However, classic Redux involved extensive boilerplate, requiring action creators, constants, and complex update logic for each feature. Redux Toolkit (RTK) addresses this by providing sensible defaults, using Immer for simpler updates, and automatically generating actions from reducers, resulting in significantly less code while maintaining predictability.
Installing Redux Toolkit and React-Redux
npm install @reduxjs/toolkit react-redux
Creating a Slice (the modern reducer)
A slice bundles together a piece of state, its reducers, and the actions that trigger them. Think of it as a self-contained module for a specific domainālike user, products, or cart.
// store/userSlice.js
import { createSlice } from "@reduxjs/toolkit";
const initialState = {
name: "Guest",
isLoggedIn: false,
preferences: { theme: "dark" }
};
const userSlice = createSlice({
name: "user",
initialState,
reducers: {
login: (state, action) => {
// Thanks to Immer, we can "mutate" the state directly!
state.name = action.payload.name;
state.isLoggedIn = true;
},
logout: (state) => {
state.name = "Guest";
state.isLoggedIn = false;
},
toggleTheme: (state) => {
state.preferences.theme = state.preferences.theme === "dark" ? "light" : "dark";
}
}
});
// Export the generated action creators
export const { login, logout, toggleTheme } = userSlice.actions;
// Export the reducer to be included in the store
export default userSlice.reducer;
Configuring the Store
The store is the central registry of all your application's state. You combine all your slices into a single root reducer and pass it to configureStore, which automatically sets up the Redux DevTools and middleware like Redux Thunk for async logic.
// store/index.js
import { configureStore } from "@reduxjs/toolkit";
import userReducer from "./userSlice";
import cartReducer from "./cartSlice";
export const store = configureStore({
reducer: {
user: userReducer,
cart: cartReducer
}
});
Providing the Store to Your React App
Wrap your entire application with the <Provider> component from React-Redux. This gives every component in the tree access to the store using hooks.
jsx
// main.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import { store } from "./store";
import App from "./App";
ReactDOM.createRoot(document.getElementById("root")).render(
<Provider store={store}>
<App />
</Provider>
);
Using State and Dispatching Actions in Components
Inside any component, you read state with useSelector and send actions with useDispatch. The selector function subscribes to the Redux store and automatically re-renders your component only when the selected data changesāgiving you fine-grained performance control without manual memoization.
jsx
// components/UserProfile.jsx
import { useSelector, useDispatch } from "react-redux";
import { login, logout, toggleTheme } from "../store/userSlice";
function UserProfile() {
const dispatch = useDispatch();
const { name, isLoggedIn, preferences } = useSelector((state) => state.user);
const handleLogin = () => {
dispatch(login({ name: "Megersa" }));
};
return (
<div>
<p>Welcome, {name}!</p>
<p>Theme: {preferences.theme}</p>
<button onClick={handleLogin}>Login</button>
<button onClick={() => dispatch(logout())}>Logout</button>
<button onClick={() => dispatch(toggleTheme())}>Toggle Theme</button>
</div>
);
}
