Структура приложения React-Redux Dashboard - PullRequest
Новая
       5

Структура приложения React-Redux Dashboard

0 голосов
/ 09 ноября 2018

Я пытаюсь создать приложение для панели мониторинга, которое должно иметь: строка состояния сверху (с кнопкой входа / выхода) панель инструментов слева (с помощью кнопок меню) эту панель инструментов можно свернуть область содержимого посередине (где должны отображаться маршруты)

Я пытаюсь построить его, используя Reactjs и Redux, и я начал думать о структуре состояний: 

{
  ui: {
    menuBarIsCollapsed: true
  },
  users: {
    all: [{}, {}],
    currentUser: { username: '', email: '', ...}
  },
  ...(this users part is repeated for each menu)
}

Когда я нажимаю на меню слева, содержимое в середине должно измениться (только эта часть).

Я создал компонент, содержащий панель инструментов и строку состояния, а затем элемент div, содержащий деталь.

Это отлично работает.

Теперь в этом контексте мне нужна форма для создания пользователей, чтобы вернуться на домашнюю страницу после успешного сохранения. Изменение маршрута является побочным эффектом, поэтому я думаю, что мне нужно что-то вроде саги.

Я не могу найти хороший пример этого в Интернете, что я думаю, что я должен сделать, это: onSubmit -> рассылка саги, которая отправляет действие «сохранить» когда действие завершено, если все в порядке, сага отправляет действие «save_complete», а затем, в качестве побочного эффекта, выдвигает новый маршрут.

В моей голове все ясно, но я не могу придумать, как его кодировать.

Спасибо

1 Ответ

0 голосов
/ 09 ноября 2018

При сохранении вы можете следовать этому рабочему процессу:

  • Действие отправки { type: "SAVE", form } из вашего Form.
  • Обрабатывать его внутри redux:
    • Для выполнения любого запроса к вашему бэкэнду это действие требует
    • Обновите состояние redux, чтобы отразить результат предыдущих действий
  • Отправьте новое состояние вашему Formcomponent
  • Отображение сообщения в виде
  • визуализация Redirect компонента из react-router из этого Form компонента для запуска перенаправления домашней страницы

Я быне рекомендуется использовать любое решение, в котором состояния маршрутизации хранятся в Redux, так как это может привести к проблемам при их синхронизации, и отдавать предпочтение архитектуре, которая четко различает маршрутизацию и состояние локального приложения.

Здесь документы для Redirect компонента в react-router

...