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

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

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

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

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

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

Это прекрасно работает.

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

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

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

Спасибо

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
376
1

Ответы 1

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

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

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

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

Спасибо, вы бы не советовали использовать saga для вызовов ajax? Я использовал промежуточное программное обеспечение, которое позволяет мне создать запрос в actionCreator и передать его как полезную нагрузку в действие, которое будет отправлено, промежуточное программное обеспечение выполняет запрос и передает ответ редуктору. Я не уверен, хорошая это идея или нет

sangio90 09.11.2018 17:46

Я думаю, что в документации redux есть пример в демонстрационном приложении todo маршрутизации и redux. в основном маршрутизация используется только для передачи информации о том, как данные должны быть представлены. Фактическая обработка и выборка данных обрабатываются внутри redux. см. этот вопрос также stackoverflow.com/questions/51734197/…. Я бы сказал, что описанный вами паттерн довольно распространен. особенно в строго типизированном контексте, где вы можете гарантировать, что отправленные действия действительно соответствуют любому используемому вами Ajax api (fetch, axios)

adz5A 09.11.2018 17:58

Другие вопросы по теме