Несколько списков задач в приложении React (родитель -> дочерние отношения)
Я обнаружил серьезный недостаток в ReactJS. Хотя я признаю, что этот недостаток, возможно, может быть недостатком в моем понимании:) Я пытаюсь создать простое приложение Todo (используя TodoMVC), и когда вы пытаетесь использовать что-то вроде Redux для управления состоянием, вы сталкиваетесь с очень, очень сложными проблемами. при попытке обработать вложенный JSON, то есть ответ базы данных, который обычно включает родительский узел ("проекты">, а затем дочерние узлы "задачи"), связанные с родительским.
Redux, кажется, хочет, чтобы вы "нормализовали" данные из ответа, чтобы они были неизменными. Никого не огорчать, но это кажется самой нелепой вещью во вселенной. Итак, мы создаем приложение SPA для обработки ответов json от наших данных... и затем... о, подождите, мы должны построить ORM на клиенте, чтобы обработать все эти данные в другом формате для их обработки.
Если это состояние (извините, это не каламбур), React, Redux и т. П., То Javascript-фреймворки следует отказаться. Я построил что-то в Rails примерно за 20 минут. Конечно, это не SPA, но было просто создать эту структуру MVC... она не только кажется чрезвычайно сложной, пугающей и слишком сложной в React, но когда Redux добавлен, он попадает в область абсурда. Возможно, именно поэтому мы видим только очень очень простые учебники со всеми этими инструментами... создание огромных приложений с их помощью невозможно.
Таким образом, в основном, просто пытаясь закодировать несколько простых строк этого примера выше с помощью response и redux, я привел к этому:
https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape
Может кто-нибудь доказать, что я не прав? ПОЖАЛУЙСТА. Просто простой кодовый элемент, показывающий мне, что у вас может быть родительский компонент "проект", к которому вы можете добавить "задачи" в качестве дочерних элементов и возможность создавать МНОГОКРАТНЫЕ родительские компоненты, с МНОЖЕСТВЕННЫМИ дочерними элементами, не спускаясь вниз по кроличьей норе выше.
На мой взгляд, это серьезный недостаток, если это правда. Стоппер.
1 ответ
Ваш вопрос и понимание неверны в нескольких отношениях.
Для контекста, я сопровождающий Redux, и я написал страницу документации Redux "Normalization State Shape", на которую вы ссылались.
Во-первых, вам не нужно использовать Redux, если вы используете React. На самом деле, мы рекомендуем, чтобы большинство новичков в первую очередь сосредоточились на изучении React, и старайтесь изучать Redux только тогда, когда им будет удобно с React.
Во-вторых, Redux не зависит от React, хотя они обычно используются вместе. Вы можете использовать Redux отдельно или с любым фреймворком пользовательского интерфейса (React, Angular, Vue, Ember, jQuery, vanilla JS и т. Д.).
В-третьих, нормализация рекомендуется, но не обязательна. На странице документов, на которую вы ссылаетесь, нормализация данных имеет несколько преимуществ, но хорошо держать ваши данные вложенными, если это лучше работает для вашего приложения.
В-четвертых, есть много больших сложных приложений, написанных с использованием React и Redux, а не просто примеры. Смотрите список приложений и примеров в моем каталоге дополнений Redux.
И документы React, и документы Redux имеют ссылки на множество примеров CodePen / CodeSandbox, которые демонстрируют, как их использовать - см. Страницы " Основные понятия" и " Учебное пособие" в документации React, а также страницу " Примеры" в документации Redux.
Кроме того, на сайте TodoMVC.com есть несколько примеров списка задач React, на которые вы можете посмотреть.
Я бы посоветовал вам потратить время на изучение учебников в документации по React. Возможно, вас заинтересуют мои предлагаемые ресурсы для изучения React и изучения Redux, а также статьи и ресурсы, перечисленные в моем списке ссылок React/Redux.