Урок 20: Создаем мини-приложение (интерфейс блога)

src/
│
├── app/
│   ├── store.ts          # Централизованная настройка store
│   └── hooks.ts          # Типизированные хуки useDispatch и useSelector
│
├── features/
│   ├── api/
│   │   └── blogApi.ts    # Основной API slice, созданный с помощью createApi
│   │
│   ├── posts/
│   │   ├── PostsList.tsx
│   │   ├── PostCard.tsx
│   │   ├── PostDetails.tsx
│   │   └── postsSlice.ts # (Опционально) для локального состояния, например, фильтров
│   │
│   ├── users/
│   │   ├── UserSelect.tsx
│   │   └── usersSlice.ts # (Опционально)
│   │
│   └── comments/
│       ├── CommentsList.tsx
│       ├── AddCommentForm.tsx
│       └── commentsSlice.ts # Для локального управления добавленными комментариями
│
├── shared/
│   └── types.ts          # Общие типы TypeScript для всего приложения
│
└── main.tsx

import { configureStore } from '@reduxjs/toolkit';
import { blogApi } from '../features/api/blogApi';
import commentsReducer from '../features/comments/commentsSlice'; // Импортируем редьюсер для локальных комментариев

export const store = configureStore({
  reducer: {
    // Добавляем редьюсер из RTK Query
    [blogApi.reducerPath]: blogApi.reducer,
    // Наш собственный редьюсер для локальных комментариев
    comments: commentsReducer,
  },
  // Подключаем middleware для кэширования и инвалидации
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(blogApi.middleware),
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

// Определяем типы для наших сущностей
export interface Post {
  id: number;
  title: string;
  body: string;
  userId: number;
}

export interface User {
  id: number;
  name: string;
  username: string;
  email: string;
}

export interface Comment {
  id: number;
  postId: number;
  name: string;
  email: string;
  body: string;
}

export const blogApi = createApi({
  reducerPath: 'blogApi',
  baseQuery: fetchBaseQuery({
    baseUrl: 'https://jsonplaceholder.typicode.com/',
  }),
  tagTypes: ['Post', 'User', 'Comment'], // Теги для инвалидации кэша
  endpoints: (builder) => ({
    // Получение всех постов
    getPosts: builder.query<Post[], void>({
      query: () => '/posts',
      providesTags: (result) =>
        // Предоставляем теги для полученных постов
        result
          ? [
              ...result.map(({ id }) => ({ type: 'Post' as const, id })),
              { type: 'Post', id: 'LIST' },
            ]
          : [{ type: 'Post', id: 'LIST' }],
    }),
    // Получение поста по ID
    getPostById: builder.query<Post, number>({
      query: (id) => `/posts/${id}`,
      providesTags: (result, error, id) => [{ type: 'Post', id }],
    }),
    // Получение всех пользователей
    getUsers: builder.query<User[], void>({
      query: () => '/users',
      providesTags: ['User'],
    }),
    // Получение пользователя по ID
    getUserById: builder.query<User, number>({
      query: (id) => `/users/${id}`,
      providesTags: (result, error, id) => [{ type: 'User', id }],
    }),
    // Получение комментариев для конкретного поста
    getCommentsByPostId: builder.query<Comment[], number>({
      query: (postId) => `/comments?postId=${postId}`,
      providesTags: (result, error, postId) => [{ type: 'Comment', postId }],
    }),
    // Добавление нового комментария (будет работать "вхолостую")
    addComment: builder.mutation<Comment, Partial<Comment>>({
      query: (newComment) => ({
        url: '/comments',
        method: 'POST',
        body: newComment,
      }),
      // Инвалидируем кэш комментариев для конкретного поста, чтобы теоретически перезапросить их
      invalidatesTags: (result, error, { postId }) => [
        { type: 'Comment', postId },
      ],
    }),
  }),
});

// Экспортируем автоматически сгенерированные хуки
export const {
  useGetPostsQuery,
  useGetPostByIdQuery,
  useGetUsersQuery,
  useGetUserByIdQuery,
  useGetCommentsByPostIdQuery,
  useAddCommentMutation,
} = blogApi;

import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { Comment } from '../api/blogApi';

interface CommentsState {
  localComments: Comment[]; // Массив для хранения добавленных нами комментариев
}

const initialState: CommentsState = {
  localComments: [],
};

const commentsSlice = createSlice({
  name: 'comments',
  initialState,
  reducers: {
    // Редьюсер для добавления нового комментария в локальный массив
    addLocalComment: (state, action: PayloadAction<Comment>) => {
      // Генерируем временный ID, чтобы не было конфликтов с серверными
      const tempId = Math.random() * 1000000;
      state.localComments.push({ ...action.payload, id: tempId });
    },
  },
});

export const { addLocalComment } = commentsSlice.actions;
export default commentsSlice.reducer;

import React, { useState, useMemo } from 'react';
import { useGetPostsQuery, useGetUsersQuery, Post } from '../api/blogApi';
import { useAppSelector } from '../../../app/hooks';
import PostCard from './PostCard';
import UserSelect from '../../users/UserSelect';

const PostsList: React.FC = () => {
  const { data: posts, isLoading, error } = useGetPostsQuery();
  const { data: users } = useGetUsersQuery();
  const [selectedUserId, setSelectedUserId] = useState<number | null>(null);

  // Получаем локальные комментарии из store
  const localComments = useAppSelector((state) => state.comments.localComments);

  // Мемоизированный вычисленный список постов с фильтрацией
  const filteredPosts = useMemo(() => {
    if (!posts) return [];
    let filtered = posts;
    if (selectedUserId) {
      filtered = posts.filter((post) => post.userId === selectedUserId);
    }
    // Обогащаем посты информацией о количестве комментариев
    return filtered.map((post) => {
      const serverCommentsCount = 5; // JSONPlaceholder всегда возвращает 5 комментов для поста. В реальном API мы бы использовали useGetCommentsByPostIdQuery.
      const localCommentsForPost = localComments.filter((comment) => comment.postId === post.id);
      const totalCommentsCount = serverCommentsCount + localCommentsForPost.length;
      return {
        ...post,
        commentCount: totalCommentsCount,
      };
    });
  }, [posts, selectedUserId, localComments]);

  if (isLoading) return <div>Загрузка постов...</div>;
  if (error) return <div>Ошибка при загрузке постов!</div>;

  return (
    <div>
      <h1>Все посты</h1>
      {/* Компонент выбора пользователя для фильтрации */}
      <UserSelect
        users={users || []}
        selectedUserId={selectedUserId}
        onSelectUser={(id) => setSelectedUserId(id)}
      />
      <div className="posts-grid">
        {filteredPosts.map((post) => (
          <PostCard key={post.id} post={post} />
        ))}
      </div>
    </div>
  );
};

export default PostsList;