Redux и Ant Design

Ant Design предоставляет богатый набор UI-компонентов, которые в сочетании с Redux позволяют строить масштабируемые и предсказуемые интерфейсы. Основная цель — управление состоянием приложения через централизованный стор Redux, обеспечивая синхронизацию данных между компонентами Ant Design.

Настройка Redux

  1. Установка зависимостей
npm install redux react-redux @reduxjs/toolkit
  1. Создание стора
import { configureStore } from '@reduxjs/toolkit';
import userReducer from './slices/userSlice';

export const store = configureStore({
  reducer: {
    user: userReducer,
  },
});
  1. Создание slice
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  users: [],
  loading: false,
  error: null,
};

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    fetchUsersStart: state => { state.loading = true; },
    fetchUsersSuccess: (state, action) => {
      state.loading = false;
      state.users = action.payload;
    },
    fetchUsersFailure: (state, action) => {
      state.loading = false;
      state.error = action.payload;
    },
  },
});

export const { fetchUsersStart, fetchUsersSuccess, fetchUsersFailure } = userSlice.actions;
export default userSlice.reducer;
  1. Подключение Redux к приложению
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './store';
import App from './App';

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

Использование Ant Design компонентов с Redux

Таблицы (Table)

Ant Design Table — мощный инструмент для отображения данных. Интеграция с Redux позволяет управлять источником данных централизованно.

import React, { useEffect } from 'react';
import { Table, Spin, Alert } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import { fetchUsersStart, fetchUsersSuccess, fetchUsersFailure } from './slices/userSlice';

const UserTable = () => {
  const dispatch = useDispatch();
  const { users, loading, error } = useSelector(state => state.user);

  useEffect(() => {
    const fetchData = async () => {
      dispatch(fetchUsersStart());
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users');
        const data = await response.json();
        dispatch(fetchUsersSuccess(data));
      } catch (err) {
        dispatch(fetchUsersFailure(err.toString()));
      }
    };

    fetchData();
  }, [dispatch]);

  const columns = [
    { title: 'ID', dataIndex: 'id', key: 'id' },
    { title: 'Имя', dataIndex: 'name', key: 'name' },
    { title: 'Email', dataIndex: 'email', key: 'email' },
  ];

  if (loading) return <Spin tip="Загрузка..." />;
  if (error) return <Alert message="Ошибка" description={error} type="error" showIcon />;

  return <Table dataSource={users} columns={columns} rowKey="id" />;
};

export default UserTable;

Ключевые моменты:

  • Использование useSelector для доступа к данным стора.
  • Диспатч действий через useDispatch для изменения состояния.
  • Обработка загрузки и ошибок через Ant Design Spin и Alert.

Формы (Form)

Ant Design Form интегрируется с Redux для управления состоянием полей и валидацией.

import React from 'react';
import { Form, Input, Button } from 'antd';
import { useDispatch } from 'react-redux';
import { addUser } from './slices/userSlice';

const UserForm = () => {
  const dispatch = useDispatch();

  const onFin ish = (values) => {
    dispatch(addUser(values));
  };

  return (
    <Form
      layout="vertical"
      onFin ish={onFinish}
    >
      <Form.Item
        label="Имя"
        name="name"
        rules={[{ required: true, message: 'Введите имя пользователя' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="Email"
        name="email"
        rules={[{ required: true, message: 'Введите email' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Добавить пользователя
        </Button>
      </Form.Item>
    </Form>
  );
};

export default UserForm;

Особенности:

  • onFinish отправляет данные формы в Redux.
  • Валидация встроена через rules.
  • Возможность синхронизации состояния формы с Redux при необходимости через Form.useForm().

Управление модальными окнами (Modal)

Компонент Modal часто используется для редактирования данных, его состояние удобно хранить в Redux.

import React from 'react';
import { Modal, Button } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import { toggleModal } from './slices/uiSlice';

const EditModal = () => {
  const dispatch = useDispatch();
  const { isModalOpen } = useSelector(state => state.ui);

  return (
    <>
      <Button type="primary" onCl ick={() => dispatch(toggleModal(true))}>
        Редактировать
      </Button>
      <Modal
        title="Редактирование"
        open={isModalOpen}
        onCan cel={() => dispatch(toggleModal(false))}
        footer={null}
      >
        {/* Содержимое формы */}
      </Modal>
    </>
  );
};

export default EditModal;

Особенности:

  • Централизованное управление открытием/закрытием через Redux.
  • Возможность комбинировать с формами Ant Design для редактирования данных.

Уведомления и сообщения (notification, message)

Ant Design notification и message используются для информирования пользователя о результатах действий. Redux может хранить статус операции и триггерить уведомления.

import { notification } from 'antd';

const notifySuccess = (text) => {
  notification.success({
    message: 'Успешно',
    description: text,
    placement: 'topRight',
  });
};

Использование в Redux-слайсе после успешного действия позволяет держать UI реактивным.

Практические советы

  • Сохранять минимальное состояние в Redux. Локальные UI-состояния (например, временный ввод в форме) можно хранить в компоненте.
  • Использовать createAsyncThunk для асинхронных операций и интеграции с Ant Design Spin.
  • Компоненты Ant Design совместимы с TypeScript, что облегчает строгую типизацию данных Redux.
  • Кастомизация компонентов через theme и ConfigProvider для глобальной стилизации, совместимой с Redux.

Redux и Ant Design вместе создают архитектуру, где состояние приложения предсказуемо, а интерфейс гибко управляется компонентами. Такая комбинация особенно полезна для сложных таблиц, форм, модальных окон и уведомлений, где важно синхронизировать данные и визуальное представление.

Оглавление