Управление состоянием и эффективный рендеринг в приложениях на React

[scramble]

ваш сайт радует

Internal server error

[mordaha]

Вы изобрели react-redux! )

[roman01la]

Честно признаться, я до сих пор не смотрел на Redux. Значит так оно и есть, все приходят к чему-то похожему :)

[mkuzmin]

Можем или в комментариях или в личке обсудить разные подходы.
Вот с что я использовал:

github.com/darkleaf/react-immutable-todo
Это один из первых экспериментов с react и immutable.
Для изменения состояния используются чистые функции github.com/darkleaf/react-immutable-todo/blob/master/lib/item/transitions.js

Недавно была задача реализовать сложные интерактивные формы для админки. Тут отлично подходили курсоры. Но не одна из реализаций мне не подошла по разным причинам. По этому я написал свою реализацию на 20 полезных строчек кода.
github.com/darkleaf/state/blob/master/state.js
Кратко про курсоры. Они позволяют пробрасывать некоторую часть состояния подкомпоненту, подкомпонент имеет доступ только к этим данным и может обновить только эти данные. При этом курсоры иммутабельны и позволяют использовать shouldComponentUpdate в реакте для очень быстрого рендеринга. Если интересно, то могу подробнее рассказать про курсоры.

Следующим шагом планирую разбираться с redux :)

[roman01la]

Привет! Мы использовали курсоры в top-down рендеринге. Без сомнения это интересное решение, но вот это вот отпочкование частей от дерева состояния не всегда работает. Не всегда выходит составить подходящую структуру состояния.

[mkuzmin]

Есть такая проблема. Курсоры работают с деревьями, а состояние может быть графом. Т.е. деревом с дополнительными связями между узлами.
Соответственно, есть задачи для которых курсоры неприменимы.

[smashercosmo]

Да, в react-redux делается все тоже самое с помощью HOC connect. Любой компонент обернутый в connect, становится smart-компонентом и получает доступ к глобальному стейту. Однако, на сколько я понял, redux-сообщество придерживается принципа «чем меньше смарт-компонентов, тем лучше» и как раз лучшим решением считает top-down рендеринг, так как он более предсказуемый.

[roman01la]

Интересно. А где можно почитать, почему redux-сообщество придерживается этого принципа?

[smashercosmo]

Вот, из официальной документации к redux:

In this todo app, we will only have a single container component at the top of our view hierarchy. In more complex apps, you might have several of them. While you may nest container components, we suggest that you pass props down whenever possible.

Пруфлинк

[roman01la]

Спасибо. Я согласен, хотелось увидеть пруф :)
Такой подход помогает создавать переиспользуемые компоненты и выделять их в библиотеку.