Найти в Дзене

WStore - основная концепция построения приложения

Концепция которая положена в основу построения приложения с помощью WStore - это отделение состояния экрана (его логики) от виджетов (его представления, того что выводится пользователю - грубо говоря вёрстки экрана). *Здесь и далее идет речь только о presentation слое приложения (про разделение слоёв как нить напишу отдельно). В идеале виджеты должны только реактивно отображать данные из сторы, которая в свою очередь уже сама занимается обработкой, всей логикой, всем приведением данных к нужному виду и тому подобными вещами. Это требует больших усилий и где-то "лишней" работы, ведь проще сделать тут же на месте чтобы работало. И что же это даёт в итоге? А даёт это прежде всего поддерживаемость. Ведь мало написать код, нужно ещё его будет дополнять и баги править (а это наверное 90% времени разработчика занимает). А вот здесь уже и пригождается понимание того что если требуется поправить размеры, отступы, цвета - то смотрим в виджеты, если надо поправить логику (что-то не нажимается или

Концепция которая положена в основу построения приложения с помощью WStore - это отделение состояния экрана (его логики) от виджетов (его представления, того что выводится пользователю - грубо говоря вёрстки экрана). *Здесь и далее идет речь только о presentation слое приложения (про разделение слоёв как нить напишу отдельно).

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

Это требует больших усилий и где-то "лишней" работы, ведь проще сделать тут же на месте чтобы работало. И что же это даёт в итоге? А даёт это прежде всего поддерживаемость. Ведь мало написать код, нужно ещё его будет дополнять и баги править (а это наверное 90% времени разработчика занимает). А вот здесь уже и пригождается понимание того что если требуется поправить размеры, отступы, цвета - то смотрим в виджеты, если надо поправить логику (что-то не нажимается или выводится не так) - то смотрим в стору. Второе что мы получаем - не нужно передавать состояние между виджетами - потому что всё находится в одном месте, в одной сторе.

Я увидел такой подход у движка Vue.js, у него так строятся компоненты (есть template, есть блок data, есть блок methods, компьютед проперти) и это классный, прозрачный подход, который я конечно же заимствовал во Flutter и в WStore.

С помощью библиотеки WStore такое разделение выглядит следующим образом: при создании экрана или сложного виджета, назовем это также как во Vue - компоненты - сразу происходит разделение на два класса:

  1. WStore - это стора, которая и будет отвечать за логику компоненты
  2. WStoreWidget - а это виджет в котором будет строиться наш компонент (дерево виджетов)

То есть мы физически разделяем это на два разных класса уже с самого начала:

-2

Теперь в WStore мы объявляем какие-то данные, а в WStoreWidget мы встраиваем в дерево билдеры на основе этих данных. Когда в сторе надо изменить данные, мы, по аналогии со стейтфул виджетом, вызываем функцию setStore и нужные билдеры сами обновляться, но не все, а только те у которых данные изменились.

Чтобы всё это дело не разрасталось монстроидально, мы можем выделять какие-то блоки в отдельные компоненты, у которых в свою очередь свой WStore.

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

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

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

GitHub - devmaslove/wstore: A flutter state management library that helps add reactivity to widgets.