Страницы

Поиск по вопросам

суббота, 7 декабря 2019 г.

Работа с большими объемами данных в React Flux/Redux

#javascript #redux #flux


Существуют ли паттерны работы со store во Flux/Redux, которые бы подразумевали загрузку
в них больших объемов данных для последующего их воспроизведениях в других местах приложения.

Например:

Имеется некий список автомобильных брендов с кратким описанием их истории и списком
моделей (забираем GET-запросом). Бренды мы можем добавлять/изменять/удалять через конструктор
(постим изменения в БД). Этот список используется на странице А, на странице Б, а также
в модальном окне. 

Так вот, является ли хорошей практикой весь список загружать в store?
    


Ответы

Ответ 1



Я использую redux и все сказанное дальше распространяется на него, про flux ничего не скажу, там все мутно раньше было, куча реализаций и тп (сейчас не знаю). И так в идеале вы сохраняете ВСЕ состояние приложения в store, именно все. Заполнили поле формы - в store, поменяли состояние кнопки в store, загружаете данные - флаг loading должен быть в store, данные загрузились - должны быть в store. Но мир не идеальный и поэтому мелкие вещи, типа "состояние плитки: перевернута" лучше хранить локально в state компонента. Плюсы: отлично работает undo\redo функционал в redux-devtools вы можете буквально сохранить store при ошибке и возпроизвести у себя минимум теневой логики, искать баги очень просто почти все компоненты stateless... просто рендер того самого состояния У вас выходит огромный объект со всеми данными приложения. Но такой огромный он не нужен для каждого компонента, по этому вы используете reselect (ОБЯЗАТЕЛЬНО ИЛИ ПОДОБНОЕ РЕШЕНИЕ, он вытаскивает маленький объект с данными из общего состояние оптимизациями, работает очень круто, бояться огромного store с ним не нужно). Кстати для загрузки данных можете использовать redux-api (не самое изящное решение, но довольно мощное) и react-redux-form (очень изящное). Посмотрите серию скринкастов от разработчика redux, очень много вопросов отпадает https://egghead.io/lessons/javascript-redux-the-single-immutable-state-tree

Комментариев нет:

Отправить комментарий