Size: a a a

Reatom — стейт-менеджер

2020 April 14

m

mg901 in Reatom — стейт-менеджер
я своё свободное время, которого тоже сейчас почти нет, трачу на Effector, и юзал бы его дальше, но мне нужен максимально быстрый вход в технологию + ts. Именно по этому посмотрел в сторону Reatom
источник

m

mg901 in Reatom — стейт-менеджер
@artalar у нас данные формы - плоский объект с примитивами.
источник

m

mg901 in Reatom — стейт-менеджер
по 50-60 полей
источник

a

artalar in Reatom — стейт-менеджер
Сколько полей? Интересно почему редакс тормозит
источник

m

mg901 in Reatom — стейт-менеджер
mg901
по 50-60 полей
^
источник

m

mg901 in Reatom — стейт-менеджер
до этого мы не использовали какой либо стейт менеджер. Всё на голом react. Так как каждый кусок давольно маленький (микросервисы)
источник

m

mg901 in Reatom — стейт-менеджер
сейчас приложения стали усложняться
источник

a

artalar in Reatom — стейт-менеджер
Норм
источник

m

mg901 in Reatom — стейт-менеджер
artalar
Норм
что норм?
источник

m

mg901 in Reatom — стейт-менеджер
Если я положу этот плоский объект в стор reatom то он будет мемоизироваться?)
источник

a

artalar in Reatom — стейт-менеджер
mg901
что норм?
50-60 полей :)
источник

a

artalar in Reatom — стейт-менеджер
mg901
Если я положу этот плоский объект в стор reatom то он будет мемоизироваться?)
Если каждое поле будет подписываться отдельно - подписка будет себя вести как мемоизированная. Но список полей нужно рендерить из отдельного списка айдишников - ну нормализация
источник

m

mg901 in Reatom — стейт-менеджер
@artalar про сайд эффекты ни чего не нашёл в документации
источник

m

mg901 in Reatom — стейт-менеджер
можно ссылку на них?
источник

m

mg901 in Reatom — стейт-менеджер
@artalar если бы не нужно был оборачивать экшены в useActions было гораздо лучше
источник

I

Ilyas Kabirov in Reatom — стейт-менеджер
а как вы представляете разделение контекста без этого?
источник

a

artalar in Reatom — стейт-менеджер
mg901
@artalar если бы не нужно был оборачивать экшены в useActions было гораздо лучше
Это необходимо что бы SSR нормально работал. Даже в эффекторе есть useEvent))
источник

a

artalar in Reatom — стейт-менеджер
mg901
@artalar про сайд эффекты ни чего не нашёл в документации
Абсолютно так же как в редаксе: саги или тп. Только вместо thunk можно колбек прям в декларацию экшена засовывать.

https://reatom.js.org/#/glossary?id=action-reactions
источник

IA

Ilya Agarkov in Reatom — стейт-менеджер
artalar
Нуу...
1) с реатомом, как и с любым СТМ с иммутабельными данными (редакс и эффектор тоже) нужна нормализация - это главный залог успеха норм перфа :)
2) если все поля формы лежат в одной куче - разницы с редаксом может не быть (или будет не сильно быстрее)
3) если у вас огромная форма и группы полей и каждая группа - отдельный нормализованный список - реатом будет заметно быстрее
4) есть идея как написать на реатоме оч производительную работу с элементами списка (на их редактирование), но на это нужно 1 человеко день, примерно, который я пока позволить себе не могу :( хотя если есть энтузиасты - могу рассказать концепцию и можно попробовать сделать.
а я пока скрещиваю в один пакет normalizr и reatom.  Идея в том что у нас не просто схемы из normalizr но и эти схемы знают в какой атом им нужно записать данные
источник

IA

Ilya Agarkov in Reatom — стейт-менеджер
it("should work with Entity Schema", () => {
   const user = {
     id: "user_1",
     name: "Steve",
     favoritePet: { id: "pet_1", name: "kesha" },
     otherPets: [
       { id: "pet_2", name: "boris" },
       { id: "pet_3", name: "balto" }
     ]
   };

   const userSchema = new Entity(usersAtom, {
     favoritePet: petsAtom,
     otherPets: [petsAtom]
   });

   normilize(store, user, userSchema);
   const usersState = store.getState(usersAtom);
   const petsState = store.getState(petsAtom);

   expect(usersState.data).toEqual({
     user_1: {
       id: "user_1",
       name: "Steve”,
       favoritePetId: “pet_1”,
       otherPetsIds: [“pet_2”, “pet_3”]
     }
   });
   expect(usersState.ids).toEqual(["user_1"]);

   expect(petsState).toEqual({
     data: {
       pet_1: { id: "pet_1", name: "kesha" },
       pet_2: { id: "pet_2", name: "boris" },
       pet_3: { id: "pet_3", name: "balto" }
     },
     ids: ["pet_1", "pet_2", "pet_3"]
   });
 });
источник