Size: a a a

React — русскоговорящее сообщество

2021 February 06

cb

callpack bsm in React — русскоговорящее сообщество
Насколько сейчас актуально использование ContainerComponent  и DumbComponent?
источник

PB

Philipp Bondarev in React — русскоговорящее сообщество
Доброго дня.
Я далёк от фронта, пользовался связкой React+Redux для собственного интереса. Сейчас решил поковыряться опять и увидел, что есть альтернатива Redux. Вижу, что MobX довольно давно появился и уже успел пройти довольно долгий путь изменений. Куча вариантов, как его использовать. Статьи в разные годы в разнобой вещают. Не до конца ясная документация. Вызывающие злобу примитивные, однотипные примеры Counter и ToDo.
Я пробую разобраться как натянуть всё это на  типизированные функциональные компоненты.
Банальный пример, хочу создать простой одностраничник с логином, регистрацией, отображением пользователей, организациями и условными документами принадлежащими пользователю внутри организации. То есть, кое-что, что выходит за рамки Counter и хотя бы как-то отображает реальный пример приложения.
Хочется собрать итоговый store из нескольких. Например, пусть будет rootStore состоящий из userStore, orgStore и docStore. Все описывать не буду, вот пример создания стора пользователя:
const createUserStore = () => {
   const store: I_UserStore = {
       ...,
       login(login, password){console.log(login, password);},
       ...
   };
   return store;
};
Теперь, создаём rootStore:
const createRootStore = () => {
   const store: I_RootStore = {
       ...,
       userStore: createUserStore(),
       ...
   };
   return store;
};
Далее надо определиться с тем, как подключать store. Решил делать это через контекст реакта:
const RootContext = React.createContext({} as I_RootStore);

const StoreProvider = ({children}: any) => {
   const rootStore = useLocalStore(createRootStore)
   return <RootContext.Provider value={rootStore}>
       {children}
   </RootContext.Provider>
};

const useRootStore = () => React.useContext(RootContext);
После, в index.tsx я оборачиваю <App/> в StoreProvider.
А в нужных компонентах просто импортирую useRootStore и пользую по назначению.
Но, возникает вопрос, всё ли я правильно делаю?
Вот, допустим, ситуация, хочу я прикрутить Notistack. Как при неудачном логине вызвать экшен notistack? Ведь login это экшен из userStore, а экшен enqueueSnackbar - в snackStore? И такого поведения может быть полно. При работе с Redux, я просто диспатчу нужный экшен в нужном месте в thunk. А как тут поступать - ума не приложу.
источник

MK

Maxim Koylo in React — русскоговорящее сообщество
callpack bsm
Насколько сейчас актуально использование ContainerComponent  и DumbComponent?
Давно не актуальны
источник

АН

Андрей Негруша... in React — русскоговорящее сообщество
Всем привет. Подскажите пж почему моё значение orderSizes не изменяется??
В функцию значения id и size приходят
источник

cb

callpack bsm in React — русскоговорящее сообщество
Maxim Koylo
Давно не актуальны
Их чем то заменили, или просто выбросили?
источник

MK

Maxim Koylo in React — русскоговорящее сообщество
callpack bsm
Их чем то заменили, или просто выбросили?
Выбросили, стор юзаеться там где он нужен
источник

cb

callpack bsm in React — русскоговорящее сообщество
Maxim Koylo
Выбросили, стор юзаеться там где он нужен
понял, спасибо!
источник

MK

Maxim Koylo in React — русскоговорящее сообщество
Philipp Bondarev
Доброго дня.
Я далёк от фронта, пользовался связкой React+Redux для собственного интереса. Сейчас решил поковыряться опять и увидел, что есть альтернатива Redux. Вижу, что MobX довольно давно появился и уже успел пройти довольно долгий путь изменений. Куча вариантов, как его использовать. Статьи в разные годы в разнобой вещают. Не до конца ясная документация. Вызывающие злобу примитивные, однотипные примеры Counter и ToDo.
Я пробую разобраться как натянуть всё это на  типизированные функциональные компоненты.
Банальный пример, хочу создать простой одностраничник с логином, регистрацией, отображением пользователей, организациями и условными документами принадлежащими пользователю внутри организации. То есть, кое-что, что выходит за рамки Counter и хотя бы как-то отображает реальный пример приложения.
Хочется собрать итоговый store из нескольких. Например, пусть будет rootStore состоящий из userStore, orgStore и docStore. Все описывать не буду, вот пример создания стора пользователя:
const createUserStore = () => {
   const store: I_UserStore = {
       ...,
       login(login, password){console.log(login, password);},
       ...
   };
   return store;
};
Теперь, создаём rootStore:
const createRootStore = () => {
   const store: I_RootStore = {
       ...,
       userStore: createUserStore(),
       ...
   };
   return store;
};
Далее надо определиться с тем, как подключать store. Решил делать это через контекст реакта:
const RootContext = React.createContext({} as I_RootStore);

const StoreProvider = ({children}: any) => {
   const rootStore = useLocalStore(createRootStore)
   return <RootContext.Provider value={rootStore}>
       {children}
   </RootContext.Provider>
};

const useRootStore = () => React.useContext(RootContext);
После, в index.tsx я оборачиваю <App/> в StoreProvider.
А в нужных компонентах просто импортирую useRootStore и пользую по назначению.
Но, возникает вопрос, всё ли я правильно делаю?
Вот, допустим, ситуация, хочу я прикрутить Notistack. Как при неудачном логине вызвать экшен notistack? Ведь login это экшен из userStore, а экшен enqueueSnackbar - в snackStore? И такого поведения может быть полно. При работе с Redux, я просто диспатчу нужный экшен в нужном месте в thunk. А как тут поступать - ума не приложу.
Можешь пожалуйста в сенбокс запихать а то не удобно так вдупляться
источник

PB

Philipp Bondarev in React — русскоговорящее сообщество
Maxim Koylo
Можешь пожалуйста в сенбокс запихать а то не удобно так вдупляться
Пока нечего запихивать. Я это так, размышляю.
источник

PB

Philipp Bondarev in React — русскоговорящее сообщество
Ладно, действительно, поковыряюсь ещё, сделаю пример и загляну позже.
источник

cb

callpack bsm in React — русскоговорящее сообщество
Maxim Koylo
Можешь пожалуйста в сенбокс запихать а то не удобно так вдупляться
я так понимаю, и connect никто не юзает?)
источник

cb

callpack bsm in React — русскоговорящее сообщество
заменили на useDispatch, useSelector ?
источник

MK

Maxim Koylo in React — русскоговорящее сообщество
Philipp Bondarev
Пока нечего запихивать. Я это так, размышляю.
ты спрашиваешь как организовывать общение между сторами?
источник

V

Vlad in React — русскоговорящее сообщество
Андрей Негруша
Всем привет. Подскажите пж почему моё значение orderSizes не изменяется??
В функцию значения id и size приходят
setSize асинхронный
источник

PB

Philipp Bondarev in React — русскоговорящее сообщество
Maxim Koylo
ты спрашиваешь как организовывать общение между сторами?
Я читал, что это плохая мысль, но по факту, ведь может же быть такое, что в экшене из стора с юзерами надо дёрнуть экшен стора документов и дополнительно экшен из стора нотификаций.
источник

АН

Андрей Негруша... in React — русскоговорящее сообщество
Vlad
setSize асинхронный
понял, спасибо
источник

MK

Maxim Koylo in React — русскоговорящее сообщество
Philipp Bondarev
Я читал, что это плохая мысль, но по факту, ведь может же быть такое, что в экшене из стора с юзерами надо дёрнуть экшен стора документов и дополнительно экшен из стора нотификаций.
кто то делает древовидную структуру сторов что бы с каждого стора ты мог по цепочке дойти до нужного тебе стора
так же кто то делает через DI
источник

АН

Андрей Негруша... in React — русскоговорящее сообщество
Vlad
setSize асинхронный
а где мне тогда искать его значения нормальные. Уже внутри самого компонента? Когда он будет перерендериваться?
источник

V

Vlad in React — русскоговорящее сообщество
Андрей Негруша
а где мне тогда искать его значения нормальные. Уже внутри самого компонента? Когда он будет перерендериваться?
useEffect
источник

PB

Philipp Bondarev in React — русскоговорящее сообщество
Maxim Koylo
кто то делает древовидную структуру сторов что бы с каждого стора ты мог по цепочке дойти до нужного тебе стора
так же кто то делает через DI
Хмм, кажется про DI статью от Тинькова на Хабре недавно видел. Надо поискать. Спасибо.
источник