xXRustamXx
@xXRustamXx

Правильно я визуализировал работу под капотом в Redux+ReactRedux после Reducer?

5bfb0632ac76d490760982.png
  • Вопрос задан
  • 343 просмотра
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Все происходит совсем не так. Вы, видимо, пытаетесь угадать, а достаточно лишь изучить исходный код библиотеки react-redux и почитать про метод store.subscribe redux.

redux и react-redux это две ничем не связанные и не подозревающие о существовании друг друга библиотеки. Компоненты react-redux лишь используют API объекта store из redux, который вы должны передать в Provider сами.
Когда вы подключаете react-redux вы используете компонент Provider и HOC connect. Ниже перечислены их основные функции.

Provider:
1. Получает в props store и подписывается на его обновления с помощью store.subscribe.
2. Инициирует перерисовку дочернего древа по обновлению store, с помощью вызова this.setState.
3. Передает в контекст store и storeState(результат вызова store.getState())

HOC connect:
1. Передает нужные props в оборачиваемый компонент с помощью, полученного через контекст, состояния и маппера mapStateToProps.
2. Оборачивает actions в вызов store.dispatch с помощью store, полученного через контекст, и маппера mapDispatchToProps, либо просто передает store.dispatch в props компонента как свойство dispatch.
3. Если аргумент mapStateToProps был передан, то компонент-обертка, возвращенный вызовом connect, отслеживает обновления store. Если свойства полученные из store и props не были изменены, а компонент уже отрисован, то connect при обновлении возвращает сохраненный по ссылке отрисованный компонент, если изменения были, то дочерний компонент перерисовывается. Логику обновления можно понять, взглянув на функцию, результат вызова которой, вызывается в render компонента обертки:
function makeChildElementSelector() {
  let lastChildProps, lastForwardRef, lastChildElement

  return function selectChildElement(childProps, forwardRef) {
    if (childProps !== lastChildProps || forwardRef !== lastForwardRef) {
      lastChildProps = childProps
      lastForwardRef = forwardRef
      lastChildElement = (
        <FinalWrappedComponent {...childProps} ref={forwardRef} />
      )
    }

    return lastChildElement
  }
}


Подробнее: react-redux with Dan Abramov
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы