React Custom Hook не вызывает обновления DOM

Question

Вот песочница, воспроизводящая мою проблему:

https://codesandbox.io/s/ymmyr3o70x?expanddevtools=1&fontsize=14&hidenavigation=1

По причинам, которые я не могу понять, когда я добавляю товар через форму, список товаров обновляется только один раз, затембольше никогда.

Я использую пользовательский хук (useObservable) в сочетании с RxJS для управления состоянием.Если вы проверяете журналы консоли, ReplaySubject действительно испускает ожидаемые значения.Но хук useObservable не запускает обновление DOM.

Чего мне не хватает?

Answer 1

Проблема в том, что ваша функция addProduct изменяет старое состояние вместо создания нового.Да, у вас есть наблюдаемое, что оно снова отправляет состояние, но, поскольку он является тем же объектом, что и раньше, вызов setValue не имеет никакого эффекта, и, следовательно, реакция не повторяется.

Решение этой проблемы - сделать государство неизменным.Например:

import { ReplaySubject } from "rxjs";

let products = {};

export const products$ = new ReplaySubject(1);

export const addProduct = product => {
  products = {...products, [product]: product};
  products$.next(products);
};