feat(redux): state management chapter (RTK)

.storybook/preview.tsx

@@ -1,7 +1,24 @@
 import type { Preview } from '@storybook/react-vite';
+import { useState } from 'react';
+import { Provider } from 'react-redux';
 import '../src/app/index.css';
+import { setupStore } from '../src/app/store';
 
 const preview: Preview = {
+  // Every story runs inside a fresh, isolated Redux store, so connected
+  // components (those using useAppSelector/useAppDispatch) work and stories
+  // don't share state. A story can preload slice state via
+  // `parameters.preloadedState` to show a specific situation.
+  decorators: [
+    (Story, context) => {
+      const [store] = useState(() => setupStore(context.parameters.preloadedState));
+      return (
+        <Provider store={store}>
+          <Story />
+        </Provider>
+      );
+    },
+  ],
   parameters: {
     controls: {
       matchers: {

eslint.config.js

@@ -87,6 +87,16 @@ export default defineConfig([
               message:
                 'Import a slice through its public API (index), not its internal files: {{ dependency.source }}',
             },
+            // 1c. Documented exception: the Redux store and its typed hooks live
+            // in `app/` because the store composes every slice and must sit at
+            // the top layer. They are cross-cutting infrastructure, so any layer
+            // may import `@/app/store` and `@/app/hooks`. This is the single
+            // sanctioned upward import. (A stricter alternative — hooks in
+            // shared with reducer injection — is noted in wiki/redux-setup.md.)
+            {
+              from: { type: '*' },
+              allow: [{ to: { type: 'app', internalPath: '{store,hooks}.{ts,tsx}' } }],
+            },
           ],
         },
       ],

package.json

@@ -14,9 +14,11 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^2.12.0",
     "@tailwindcss/vite": "^4.3.0",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
+    "react-redux": "^9.3.0",
     "tailwindcss": "^4.3.0"
   },
   "devDependencies": {

src/app/hooks.ts

@@ -0,0 +1,8 @@
+import { useDispatch, useSelector } from 'react-redux';
+import type { AppDispatch, RootState } from './store';
+
+// Typed wrappers around the React-Redux hooks. Use these throughout the app
+// instead of the plain useDispatch / useSelector so dispatch and selectors are
+// fully typed against our store.
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
+export const useAppSelector = useSelector.withTypes<RootState>();

src/app/main.tsx

@@ -1,10 +1,14 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
+import { Provider } from 'react-redux';
 import './index.css';
+import { store } from './store';
 import { HomePage } from '@/pages/home';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <HomePage />
+    <Provider store={store}>
+      <HomePage />
+    </Provider>
   </StrictMode>,
 );

src/app/store.ts

@@ -0,0 +1,22 @@
+import { todoReducer } from '@/entities/todo';
+import { filterReducer } from '@/features/filter-todos';
+import { combineReducers, configureStore } from '@reduxjs/toolkit';
+
+const rootReducer = combineReducers({
+  todos: todoReducer,
+  filter: filterReducer,
+});
+
+// Factory so tests and Storybook can spin up isolated stores (optionally with
+// preloaded state) instead of sharing the app singleton.
+export const setupStore = (preloadedState?: Partial<RootState>) => {
+  return configureStore({ reducer: rootReducer, preloadedState });
+};
+
+// The one store the running app uses.
+export const store = setupStore();
+
+// Types are derived from the root reducer / store, not written by hand.
+export type RootState = ReturnType<typeof rootReducer>;
+export type AppStore = ReturnType<typeof setupStore>;
+export type AppDispatch = AppStore['dispatch'];

src/entities/todo/index.ts

@@ -1,2 +1,4 @@
-export { TodoItem } from './ui/TodoItem';
+export { selectTodos } from './model/selectors';
+export { todoAdded, todoDeleted, todoReducer, todoToggled } from './model/todoSlice';
 export type { Todo } from './model/types';
+export { TodoItem } from './ui/TodoItem';

src/entities/todo/model/selectors.ts

@@ -0,0 +1,4 @@
+import type { RootState } from '@/app/store';
+
+// Basic selector: reads the todos slice's items out of the whole state.
+export const selectTodos = (state: RootState) => state.todos.items;

src/entities/todo/model/todoSlice.ts

@@ -0,0 +1,42 @@
+import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
+import type { Todo } from './types';
+
+interface TodosState {
+  items: Todo[];
+}
+
+const initialState: TodosState = {
+  items: [],
+};
+
+const todoSlice = createSlice({
+  name: 'todos',
+  initialState,
+  reducers: {
+    // `prepare` lets the caller pass just the text; the id is generated here,
+    // so the action stays a description of "what happened" and the component
+    // does not need to know how ids are made.
+    todoAdded: {
+      reducer(state, action: PayloadAction<Todo>) {
+        state.items.push(action.payload);
+      },
+      prepare(text: string) {
+        return {
+          payload: { id: crypto.randomUUID(), text, completed: false } satisfies Todo,
+        };
+      },
+    },
+    todoToggled(state, action: PayloadAction<string>) {
+      const todo = state.items.find((item) => item.id === action.payload);
+      if (todo) {
+        todo.completed = !todo.completed;
+      }
+    },
+    todoDeleted(state, action: PayloadAction<string>) {
+      state.items = state.items.filter((item) => item.id !== action.payload);
+    },
+  },
+});
+
+export const { todoAdded, todoToggled, todoDeleted } = todoSlice.actions;
+export const todoReducer = todoSlice.reducer;

src/features/add-todo/ui/AddTodoForm/AddTodoForm.stories.tsx

@@ -1,6 +1,5 @@
-import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { fn, userEvent, within } from 'storybook/test';
+import { expect, fn, userEvent, within } from 'storybook/test';
 import { AddTodoForm } from './AddTodoForm';
 
 const meta: Meta<typeof AddTodoForm> = {
@@ -10,42 +9,22 @@ const meta: Meta<typeof AddTodoForm> = {
     layout: 'padded',
   },
   tags: ['autodocs'],
-  args: {
-    onAdd: fn(),
-  },
+  args: { onAdd: fn() },
 };
 export default meta;
 
 type Story = StoryObj<typeof AddTodoForm>;
 
-export const Interactive: Story = {
-  render: (args) => {
-    const [todos, setTodos] = useState<string[]>([]);
-
-    const handleAdd = (text: string) => {
-      args.onAdd(text); // вызовем из args — попадёт в Actions panel
-      setTodos((prev) => [...prev, text]);
-    };
-
-    return (
-      <div className='flex flex-col gap-3'>
-        <AddTodoForm onAdd={handleAdd} />
-        <ul>
-          {todos.map((t, i) => (
-            <li key={i}>• {t}</li>
-          ))}
-        </ul>
-      </div>
-    );
-  },
-};
-
-export const Empty: Story = {};
+// Presentational again — onAdd is a prop, the widget owns the dispatch.
+export const Default: Story = {};
 
-export const Filled: Story = {
-  play: async ({ canvasElement }) => {
+export const AddsTodo: Story = {
+  play: async ({ args, canvasElement }) => {
     const canvas = within(canvasElement);
-    const input = canvas.getByPlaceholderText('Add a new todo');
+    const input = canvas.getByPlaceholderText('Add a new todo task');
     await userEvent.type(input, 'Buy milk');
+    await userEvent.click(canvas.getByRole('button', { name: 'Add' }));
+    await expect(input).toHaveValue(''); // input cleared after submit
+    await expect(args.onAdd).toHaveBeenCalledWith('Buy milk');
   },
 };

src/features/add-todo/ui/AddTodoForm/AddTodoForm.tsx

@@ -8,6 +8,7 @@ interface AddTodoFormProps {
 export const AddTodoForm = ({ onAdd }: AddTodoFormProps) => {
   const [text, setText] = useState('');
   const trimmedText = text.trim();
+
   const handleSubmit = (e: SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
     if (trimmedText === '') return;