src/
├── app/
│   ├── store.js
│   └── hooks.js          # Типизированные useDispatch/useSelector
├── features/
│   ├── auth/
│   │   ├── authSlice.js
│   │   ├── authApi.js    # RTK Query
│   │   ├── Login.jsx
│   │   └── index.js
│   ├── posts/
│   │   ├── postsSlice.js
│   │   ├── postsApi.js
│   │   ├── PostList.jsx
│   │   ├── PostItem.jsx
│   │   └── index.js
│   └── users/
│       └── ...
└── common/
    └── components/

// app/hooks.ts
import { useDispatch, useSelector } from 'react-redux'
import type { RootState, AppDispatch } from './store'

export const useAppDispatch = useDispatch.withTypes<AppDispatch>()
export const useAppSelector = useSelector.withTypes<RootState>()

// ❌ Плохо: вложенные данные
{
  posts: [
    {
      id: 1,
      title: 'Post 1',
      author: { id: 1, name: 'Алексей' },
      comments: [
        { id: 1, text: 'Отлично!', author: { id: 2, name: 'Мария' } }
      ]
    }
  ]
}

// ✅ Хорошо: нормализованные данные
{
  posts: {
    ids: [1, 2, 3],
    entities: {
      1: { id: 1, title: 'Post 1', authorId: 1, commentIds: [1, 2] },
      2: { id: 2, title: 'Post 2', authorId: 1, commentIds: [] }
    }
  },
  users: {
    ids: [1, 2],
    entities: {
      1: { id: 1, name: 'Алексей' },
      2: { id: 2, name: 'Мария' }
    }
  },
  comments: {
    ids: [1, 2],
    entities: {
      1: { id: 1, text: 'Отлично!', authorId: 2, postId: 1 }
    }
  }
}

import { createSlice, createEntityAdapter } from '@reduxjs/toolkit'

const postsAdapter = createEntityAdapter({
  sortComparer: (a, b) => b.date.localeCompare(a.date)
})

const postsSlice = createSlice({
  name: 'posts',
  initialState: postsAdapter.getInitialState({
    status: 'idle'
  }),
  reducers: {
    postAdded: postsAdapter.addOne,
    postUpdated: postsAdapter.updateOne,
    postRemoved: postsAdapter.removeOne,
    postsReceived: postsAdapter.setAll
  }
})

// Селекторы — автогенерированные
export const {
  selectAll: selectAllPosts,
  selectById: selectPostById,
  selectIds: selectPostIds
} = postsAdapter.getSelectors(state => state.posts)

import { createSelector } from '@reduxjs/toolkit'

// Базовые селекторы
const selectPosts = state => state.posts.items
const selectFilter = state => state.posts.filter

// Мемоизированный селектор
export const selectFilteredPosts = createSelector(
  [selectPosts, selectFilter],
  (posts, filter) => {
    console.log('Пересчёт selectFilteredPosts') // Только при изменении inputs
    switch (filter) {
      case 'completed':
        return posts.filter(p => p.completed)
      case 'active':
        return posts.filter(p => !p.completed)
      default:
        return posts
    }
  }
)

// Селектор с параметром
export const selectPostsByUser = createSelector(
  [selectPosts, (state, userId) => userId],
  (posts, userId) => posts.filter(p => p.userId === userId)
)

const postsSlice = createSlice({
  name: 'posts',
  initialState: {
    items: [],
    status: 'idle',
    error: null
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchPosts.rejected, (state, action) => {
        state.status = 'failed'
        // action.payload — если использовали rejectWithValue
        // action.error — стандартная ошибка
        state.error = action.payload ?? action.error.message
      })
      // Глобальный обработчик для всех rejected
      .addMatcher(
        (action) => action.type.endsWith('/rejected'),
        (state, action) => {
          console.error('Global error handler:', action.error)
        }
      )
  }
})

const loggerMiddleware = (store) => (next) => (action) => {
  console.group(action.type)
  console.log('dispatching', action)
  const result = next(action)
  console.log('next state', store.getState())
  console.groupEnd()
  return result
}

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(loggerMiddleware)
})

import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'

const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['auth', 'settings'] // Только эти слайсы сохраняются
}

const persistedReducer = persistReducer(persistConfig, rootReducer)

const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: ['persist/PERSIST', 'persist/REHYDRATE']
      }
    })
})