Несколько списков задач в приложении React (родитель -> дочерние отношения)

Question

Я обнаружил серьезный недостаток в 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

Может кто-нибудь доказать, что я не прав? ПОЖАЛУЙСТА. Просто простой кодовый элемент, показывающий мне, что у вас может быть родительский компонент «проект», к которому вы можете добавить «задачи» в качестве дочерних элементов и возможность создавать MULTIPLE родительских компонентов с MULTIPLE дочерними элементами, не спускаясь вниз по кроличьей норе выше.

Это серьезный недостаток, на мой взгляд, если это правда. Стоппер.

Answer 1

Ваш вопрос и понимание неверны в нескольких отношениях.

Для контекста, я сопровождающий Redux, и я написал страницу документации Redux "Нормализация состояния формы", на которую вы ссылались.

Во-первых, вам не нужно , чтобы использовать Redux, если вы используете React. На самом деле, мы рекомендуем, чтобы большинство новичков в первую очередь сосредоточились на изучении React, и старайтесь изучать Redux только тогда, когда им будет удобно с React.

Во-вторых, Redux не зависит от React, хотя они обычно используются вместе. Вы можете использовать Redux отдельно или с любым фреймворком пользовательского интерфейса (React, Angular, Vue, Ember, jQuery, vanilla JS и т. Д.).

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

В-четвертых, множество больших сложных приложений, написанных с использованием React и Redux, а не просто примеры. См. Список приложений и примеров в моем каталоге Redux addons .

Как документы React, так и документы Redux имеют ссылки на множество примеров CodePen / CodeSandbox, демонстрирующих, как их использовать - см. Основные понятия и Учебное пособие страницы в документах React, и Примеры страниц в Redux docs.

Также на сайте TodoMVC.com есть несколько примеров списка задач React , на которые вы можете посмотреть.

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