Ревью: MobX

[dc-nikolaev]

1. Почему UserStore единственный передаётся через контекст? Остальные сделаны как синглтоны
2. В UserStoreProvider нужна конструкция вроде const [store] = useState(() => new UserStore());, т.к. текущий вариант при любом ре-рендере UserStoreProvider приведёт к потере данных из-за пересоздания store'а
3. Похоже, что runInAction в useFetchProducts.ts не нужен из-за makeAutoObservable. Все остальные методы сторов дёргаются без этого; если runInAction не нужен, то может упросить конфиг с рантайм валидацией?

---

Что насчёт использования фич mobx для упрощения компонентов? В CardStore можно добавить computed свойства itemsCount, isEmpty, cartItems

Тогда можно будет сделать типа такого:

  export const ShoppingListModal = observer(() => {
      const { isEmpty } = cartStore;

     // ...

      return (
          <>
              { /* ... */} 
              {isEmpty ? <EmptyCart /> : <ShoppingListWithProducts />}
              { /* ... */}
          </>
      );
  });

---

В UserStore можно добавить реакцию на изменение userName для автоматической синхронизации с localStorage вместо ручного управления

      reaction(
          () => this.userName,
          (userName) => {
              if (userName) {
                  safeLocalStorage.setItem(LocalStorageKey.USER_NAME, userName);
              } else {
                  safeLocalStorage.removeItem(LocalStorageKey.USER_NAME);
              }
          }
      );

Хотя именно тут пример вырожденный. Но если будут ещё методы, кроме setUserInfo/eraseUserInfo, то это классная инвестиция

---

Через эти же реакции можно было бы в CardStore удобно хранить корзину в sessionStorage 🤷🏻‍♂️

---

Как насчёт использовать store'ы друг в друге, раз они синглтоны?

CardStore может быть таким:

      get cartItems() {
          return Object.entries(this.productAmountById).map(([id, amount]) => ({
              product: productStore.productsById[id],  // ← зависимость от productStore
              amount,
          }));
      }

      get totalPrice() {
          return this.cartItems.reduce(
              (sum, { product, amount }) => sum + product.priceWithoutDiscount * amount,
              0
          );
      }

Т.е. кусок бизнес-логики можно вытащить из jsx