Advanced Redux — Side Effects, Async Tasks & ThunksEntry 7 of 9

Scalable Feature Folder Structure

Organizing Redux code by feature, with each feature folder holding its slice, components, and API calls.

Notes

app/ holds app-wide setup: the store and typed hooks.
Each feature folder (users/, posts/) is self-contained: slice, components, and api.ts for HTTP functions.
Keeping HTTP in api.ts mirrors Angular's service convention and makes thunks easy to test.

What / Why / When

What: Feature-based organization.
Why: Features can grow, move, or be deleted without touching others.
When: Any app with more than one or two slices.

Code compare

React

src/├── app/│   ├── store.ts        // configureStore, RootState, AppDispatch, AppThunk│   └── hooks.ts        // useAppDispatch, useAppSelector├── features/│   ├── users/│   │   ├── usersSlice.ts│   │   ├── UsersList.tsx│   │   └── api.ts│   └── posts/│       └── postsSlice.ts└── main.tsx

Angular

src/app/├── app.config.ts             // provideStore, provideEffects, provideStoreDevtools├── core/│   └── ui/                   // ui.actions.ts, ui.feature.ts└── features/    ├── users/    │   ├── users.actions.ts    │   ├── users.feature.ts    │   ├── users.effects.ts    │   ├── users.service.ts    │   └── users-list.component.ts    └── posts/        └── posts.feature.ts

Each feature can register its own state and effects on a lazy route with provideState(usersFeature) and provideEffects(usersEffects).

Quick reference

File role	Redux Toolkit	NgRx
Store setup	`app/store.ts`	`app.config.ts`
State + reducers	`usersSlice.ts`	`users.feature.ts` (+ `users.actions.ts`)
Async logic	Thunks in slice / `*-actions.ts`	`users.effects.ts`
HTTP calls	`api.ts`	`users.service.ts`