Как redux определяет, какие компоненты надо обновить?

Question

[MishaXXL]

Как reduxпривязываться в коде к компонентам через

const count = useSelector((state: { counter: number }) => state.counter)

Как я понял, у нас редакс создает в нашем компоненте обертке объект, где хранит

<Provider store={store}>
   <App />
</Provider>

набор свойств откуда берется одно из наших значений counter

Но как он понимает в каких компонентах лежат наши селекторы

const count = useSelector((state: { counter: number }) => state.counter)

если мы это не указываем в наших редьюсерах

И каким образом он заставляет принудительно обновиться компонентам?

Comments

[Kentavr16]

Посмотри паттерн обсервер. Там есть подписчики. Редакс основан на этом принципе.

Answer 1

[Alexandroppolus]

useSelector внутри себя использует хук useSyncExternalStore (точнее, хук, аналогичный ему)

вкратце суть работы: из редуксового контекста (того самого, который использован внутри Provider) достается редуксовый же стор. Этот стор постоянный, но в нем есть состояние - объект, ссылка на который меняется при каждом изменении, ибо иммутабельность. Подписываемся на изменение этой ссылки (т.е. по факту на изменение любой части состояния), у стора есть метод subscribe для этого. При срабатывании эвента забираем наши данные селектором, и если результат селектора отличается от предыдущего раза, значит изменились именно наши данные и надо пнуть компонент, чтобы обновился, это уже useSyncExternalStore знает как сделать.