Читать на других языках: Русский, Українська, English.

Redux. Redux Toolkit. RTK Query.

Приложение - «Список дел».

Приложение для создания, изменения и удаления списка дел (задач).

1. Бэкенд mockapi.io.

Для бэкенда используется mockapi.io. Необходимо:

• зарегистрироваться используя свой аккаунт GitHub.
• создать ресурс todos чтобы получить ендпоинт /todos.
• использовать конструктор ресурса и описать объект todo как на иллюстрации ниже.

Посмотреть пример  ⤸

2. Настройка RTK Query.

Ссылка на документацию по работе с Redux Toolkit и RTK Query.

• Определить основные ендпоинты и схемы данных для ваших запросов. После создания ресурса todos, основные ендпоинты для CRUD операций будут как на иллюстрации ниже.

Посмотреть пример  ⤸

• Создать slice в Redux Toolkit для управления данными, полученными из API с помощью createApi.

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

• Создать store, добавить в него slice и middleware.

import { configureStore } from '@reduxjs/toolkit';

export const store = configureStore({
  reducer: {
	// Add the generated reducer as a specific top-level slice
	},
  middleware: getDefaultMiddleware => [
    ...getDefaultMiddleware(),
    todoApi.middleware,
  ],
})

• Обернуть приложение провайдером, добавив пропсом store.

import { store } from './app/store';
import { Provider } from 'react-redux';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

3. Создание UI.

Для создания пользовательского интерфейса используется фреймворк Material UI. Нужно реализовать возможность добавления новых задач, удаления задач, изменения задач и отметки задач как выполненных.