Redux Implementation Guide — With Code
This PDF contains runnable example code for setting up Redux Toolkit in a React project. Copy the files into
your project structure as shown.
1) Install dependencies
// Install via npm
npm install @reduxjs/toolkit react-redux
// Example [Link] dependencies snippet
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"@reduxjs/toolkit": "^1.9.0",
"react-redux": "^8.0.0"
}
2) src/store/[Link]
// src/store/[Link]
import { configureStore } from "@reduxjs/toolkit";
import userReducer from "./userSlice";
const store = configureStore({
reducer: {
user: userReducer,
},
});
export default store;
3) src/store/[Link]
// src/store/[Link]
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
// Example async thunk (fetch user)
export const fetchUser = createAsyncThunk("user/fetchUser", async (userId, thunkAPI) => {
const res = await fetch(`[Link]
const data = await [Link]();
return data; // will be [Link]
});
const userSlice = createSlice({
name: "user",
initialState: {
value: null,
status: "idle",
error: null,
},
reducers: {
setUser: (state, action) => {
[Link] = [Link];
},
clearUser: (state) => {
[Link] = null;
},
},
extraReducers: (builder) => {
builder
.addCase([Link], (state) => {
[Link] = "loading";
})
.addCase([Link], (state, action) => {
[Link] = "succeeded";
[Link] = [Link];
})
.addCase([Link], (state, action) => {
[Link] = "failed";
[Link] = [Link];
});
},
});
export const { setUser, clearUser } = [Link];
export default [Link];
4) src/[Link] (Provide store to React app)
// src/[Link]
import React from "react";
import { createRoot } from "react-dom/client";
import { Provider } from "react-redux";
import store from "./store/store";
import App from "./App";
const container = [Link]("root");
const root = createRoot(container);
[Link](
<[Link]>
<Provider store={store}>
<App />
</Provider>
</[Link]>
);
5) src/[Link] and a component using Redux
// src/[Link]
import React from "react";
import UserProfile from "./components/UserProfile";
export default function App() {
return (
<div>
<h1>Redux Toolkit Example</h1>
<UserProfile userId={1} />
</div>
);
}
6) src/components/[Link]
// src/components/[Link]
import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { fetchUser, setUser, clearUser } from "../store/userSlice";
export default function UserProfile({ userId }) {
const dispatch = useDispatch();
const user = useSelector((state) => [Link]);
const status = useSelector((state) => [Link]);
const error = useSelector((state) => [Link]);
useEffect(() => {
if (userId) {
dispatch(fetchUser(userId));
}
return () => {
// optional cleanup
// dispatch(clearUser());
};
}, [dispatch, userId]);
return (
<div>
{status === "loading" && <p>Loading...</p>}
{status === "failed" && <p>Error: {error}</p>}
{user && (
<div>
<h2>{[Link]}</h2>
<p>Email: {[Link]}</p>
<button onClick={() => dispatch(clearUser())}>Clear</button>
</div>
)}
</div>
);
}
7) Suggested folder structure
src/
[Link]
[Link]
store/
[Link]
[Link]
components/
[Link]
8) Tips & Notes
- Use the Redux DevTools extension: configureStore enables it by default in development.
- Keep slices focused: one slice per domain (auth, products, cart).
- Use createAsyncThunk for async logic; use RTK Query for complex data fetching needs.
- Prefer Immer/immutable updates via "mutating" syntax in reducers (RTK handles immutability).