InterviewHubPRO
Section Overview
Q120

Question 120 of 445

Part 5: React Redux State Management (101 - 134)

27%
React & Modern Frontend (445 Qs)•Part 5: React Redux State Management (101 - 134)

How to structure Redux top level directories?

Most of the applications has several top-level directories as below:

  1. Components: Used for dumb components unaware of Redux.
  2. Containers: Used for smart components connected to Redux.
  3. Actions: Used for all action creators, where file names correspond to part of the app.
  4. Reducers: Used for all reducers, where files name correspond to state key.
  5. Store: Used for store initialization.

This structure works well for small and medium size apps.

Practical Code Example

text
// Recommended Feature-based or Ducks structure:
src/
  features/
    auth/
      authSlice.ts
      LoginView.tsx
    posts/
      postsSlice.ts
      PostList.tsx
  app/
    store.ts