Как правильно хранить и передавать состояние в React.js?

Question

[kamelot43]

Коллеги, приветствую. Подскажите пожалуйста одну вещь ? Возник вопрос по react.js. Работаю над проектом, где необходимо подготовить верстку и стили для блоков. Сами блоки и более мелкие элементы реализованы как react-компоненты. Предполагается , что из готовых блоков можно будет собрать страницу. Как правило каждый компонент содержит свой state , где хранятся данные , которые используются для отрисовки (например имя, должность, соц-сети юзера или тарифы , список фич и т.д.). Я правильно понимаю, что если нужно собрать страницу из блоков должен быть какой-то один родительский компонент (например hoc), который будет содержать все компоненты , а все состояние из отдельных файлов(react-компонентов) нужно скомпоновать в один и передать его только в этот родительский компонент ? т.е. состояние должно храниться не внутри каждого отдельного компонента, а только в родительском компоненте ? есть возможность передать состояние от родителя к потомку , если потомок отрисовывает данные беря их из состояния ? извиняюсь за большое количество текста. голова уже идет кругом. Заранее спасибо.


прав

Answer 1

[TRNER]

Если я правильно понял вашу проблему, то почитайте про глупые и умные компоненты.

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

Answer 2

[Islam Ibakaev]

минимальный набор для вашего проекта:
react,
react-dom,
react-router-dom(маршрутизация),
redux(хранилище данных),
react-redux(подключение компонентов к хранилищу),
redux-thunk(асинхронное изменение данных в хранилище),
axios(удобный http-клиент),
formik(формы)

Comments

[Максим Ламбов]

к формику yup