Правильно ли я понимаю идею Redux?

Question

[Роман Якимчук]

Друзья, привет,

Я активно пересел с Ангуляра на изучение Реакта, и долгое время до этого не понимал зачем вообще нужен Redux. Когда изучил React, появилось несколько идей:

1. В Реакте нет нормального способа шарить данные между любыми компонентами в дереве компонентов, кроме контекста. Нельзя просто взять, создать объект, получить к нему прямой доступ из компонентов (т.е. по сути сделать хранилище данных), и подписаться на изменения данных в этом хранилище. Реакт просто не отреагирует на это, ему нужно изменение состояния, а этого не произойдет. Либо, нужно делать обходные пути по форсированию рендера, что тоже плохо.

2. Это централизованный способ управления состоянием, т.е вместо множественного доступа в хранилище, мы централизуем управление состоянием приложения. Это дает хорошие бонусы, вплоть до хранения состояния приложения в памяти. Круто.

Всё ли правильно?
Опытные Redux-мэны, можете что-нибудь подсказать, что я еще не знаю пока?

Comments

[DimaIs]

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

[Роман Якимчук]

DimaIs, Так это не будет каша, если у нас приложение на 100 вьюшек, и в общем хранилище будет довольно много ключей? Это не проблема?

И вообще, это нормально практика, когда состояние, которое нужно шарить между компонентами одного роута, мы выносим в глолбальное хранилище данных приложения? Как обычно решается задача обмена данными между компонентами одного роута, если эти данные больше нигде в приложении не нужны?

[profesor08]

Попробуй mobx каши не будет

[Yustas Alexu]

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

Answer 1

[Yustas Alexu]

Идея Redux изложена в трех пунктах в официальной документации https://redux.js.org/introduction/three-principles :

• Single source of truth
  
• State is read-only
  
• Changes are made with pure functions
  

Кроме этого полезно почитать секцию https://redux.js.org/introduction/prior-art . В ней рассказыается предистория.

Answer 2

[Владимир Шестаков]

Нельзя просто взять, создать объект, получить к нему прямой доступ из компонентов (т.е. по сути сделать хранилище данных), и подписаться на изменения данных в этом хранилище. Реакт просто не отреагирует на это, ему нужно изменение состояния, а этого не произойдет. Либо, нужно делать обходные пути по форсированию рендера, что тоже плохо.

Так redux это и делает в функции connect. Подписывается на данные и дергает setState для форсирования рендера.

Comments

[Yustas Alexu]

Redux не "дергает" setState.

[Владимир Шестаков]

Yustas Alexu, это он с 6 версии на новом контексте, что в сути не меняет логики.

[Yustas Alexu]

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

[Yustas Alexu]

Владимир Шестаков, функция connect соединяет store с компонентом и передает ему куски стейта через props. Какие именно куски передавать и как, определяется в mapStateToProps. При этом когда компонент получает props, совсем не обязательно, что он их будет использовать. Поэтому в случае когда компонент не использует в рендере ни один из props прокинутых из redux, то хоть задергай dispatch, перерендера не будет.

[Владимир Шестаков]

Yustas Alexu, Смотрим код 5 версии https://github.com/reduxjs/react-redux/blob/5.x/sr...

class Connect extends Component {
  constructor(props, context) {
      // .......
      this.initSubscription()
   }

   initSubscription() {
       // .......
       this.subscription = new Subscription(this.store, parentSub, this.onStateChange.bind(this))
       // ......
    }

    onStateChange() {
       // ...
       this.setState(dummyState)
      //...
    }

[Владимир Шестаков]

Yustas Alexu, вы перепутали сам redux и то как он к реакту привязывается.

[Yustas Alexu]

Владимир Шестаков, ок, признаюсь, не заглядывал в исходники connect. Был не прав, теперь буду знать )

Answer 3

[Василий]

Ну это примерно то же что и NGXS который вы используете в ангуляре.