React 19 Приложение "События"

Space of React

требуется вход

Войдите, чтобы смотреть видео

Видеоуроки, интерактивный редактор и сохранение прогресса — бесплатно, сразу после входа.

Войти Создать аккаунт — бесплатно

Закончили урок?

Войдите, чтобы отмечать прогресс

Войти

Урок

React 19 Приложение "События" — УрокСостояние для событий — React 19 Приложение "События" | Max Roslow | Space of React

Состояние store событий

Типы Zustand store для списка событий, моих событий, загрузок, ошибок и действий над событиями.

client/src/stores/events-store.ts


export type MyEventsFilter = 'created' | 'joined'

type EvetnsState = {
    events: EventDto[]
    joinedEvents: JoinedEventItem[]
    myEventsFilter: MyEventsFilter

    eventsLoading: boolean
    joinedLoading: boolean
    mutationLoading: boolean
    evetnsError: string | null

    setMyEventsFilter: (fileter: MyEventsFilter) => void
    loadEvents: () => Promise<void>
    loadJoinedEvents: () => Promise<void>
    createEvent: (payload: CreateEventRequest) => Promise<EventDto>
    updateEvent: (id: string, payload: UpdateEventRequest) => Promise<EventDto>
    removeEvent: (id: string) => Promise<void>
    joinEvent: (id: string) => Promise<void>
    leaveEvent: (id: string) => Promise<void>
}

Что хранит store:

events — все события
joinedEvents — события, в которых участвует пользователь
myEventsFilter — активный фильтр: created или joined
eventsLoading, joinedLoading, mutationLoading — состояния загрузки
evetnsError — текст ошибки
async actions для загрузки, создания, обновления, удаления, входа и выхода из события app.studyraid

Создание события

Действие для создания события, обновления списка в store и обработки ошибки API.

client/src/stores/events-store.ts


createEvent: async (payload) => {
    set({ mutationLoading: true, evetnsError:

Обновление события

Действие для обновления события сразу в двух коллекциях: общем списке и списке событий, где пользователь участвует.

client/src/stores/events-store.ts


updateEvent: async (id, payload) => {
    set({ mutationLoading:

Удаление события

Действие для удаления события из общего списка и из списка участий пользователя.

client/src/stores/events-store.ts


removeEvent: async (id) => {
    set({ mutationLoading: true, evetnsError: