Redux & Redux Toolkit
/Intermediate
Folder Structure
Definition
The standard layout for a modern React-Redux application, combining feature folders with an `app` folder for core setup.
Explain Like I'm New
You need a central place to boot up the Redux brain, and feature folders to hold the actual logic. The official template uses an `app/` folder for `store.js`, and a `features/` folder for everything else.
Real World Example
Running `npx create-react-app my-app --template redux`. It generates this exact, perfected folder structure automatically.
Common Use Cases
- •Bootstrapping new projects
Terminal Output
bash / terminal
/*
The Official Modern Redux Toolkit Folder Structure:
src/
├── app/
│ ├── store.js (configures the root store)
│ └── hooks.js (exports typed useAppDispatch/useAppSelector)
│
├── features/
│ ├── counter/
│ │ ├── Counter.jsx (React component)
│ │ ├── counterSlice.js (Redux logic)
│ │ └── counterAPI.js (API requests)
│ │
│ └── auth/
│ ├── Login.jsx
│ └── authSlice.js
│
├── components/ (Dumb UI components: Buttons, Inputs)
└── index.js (Wraps App in <Provider>)
*/
Interview Questions
basic
- In the official Redux template, what is usually placed inside the `app/` folder?
intermediate
- Where should you place generic UI components like a `<Button />` that are used by many features?