Телеграмм чат группы reatom

2021 March 02

a

Мне чем пакет для реакта не нравится, так это необходимость при использовании useAtom таскать за собой ссылку на atom. Я закостылил конечно

fn createUseSelector(atom)
    return fn useSelector(selector) { return useAtom(atom, selector) }

export useSelector = createUseSelector(atom)

но хотелось бы что-нибудь из коробки для этого

Типа
const data = dataAtom.useSelector()

?

источник

08:58пожаловаться #1

y

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

artalar

Типа
const data = dataAtom.useSelector()

?

не знаю, в каком это виде лучше сделать. Я вот пошел через фабрику для хуков.
Можно наделать таких сколь угодно

useSelector1 = create(atom1)
useSelector2 = create(atom2)

источник

09:01пожаловаться #2

M

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

возможно ли подключить дебаг-тул по такой схеме (расширил пример https://reatom.js.org/#/packages/debug?id=redux-devtools) и не будет ли утечек?

store.ts

import { createStore } from "@reatom/core";
import { connectReduxDevtools } from "@reatom/debug";

import { elementsAtom } from "./element";

const isProduction = process.env.NODE_ENV === "production";

export const store = createStore(elementsAtom);

export const unsubscribeDevTools = !isProduction && connectReduxDevtools(store);

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

если кто-то подскажет способ изящнее, будет круто

источник

15:55пожаловаться #3

M

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

@artalar обратил внимание, что на воркшопе при подключении модулей ты часто перезапускал приложение, потому что не сразу подхватывались зависимости или типы.

сейчас в процессе миграции сталкиваюсь с аналогичным поведением, когда требуется перезапустить приложение при подключеннии модулей или не сразу подхватываются какие-то изменения

например, после добавления дебаг-модуля два последних экшна в коде логировались успешно, а первый getElementsFetching - нет. я почти отчаялся, и перезапустил приложение и все появилось.

это какой-то плавающий баг или что-то другое?

export const fetchElements = declareAction(async (_, { dispatch }) => {
  try {
    dispatch(getElementsFetching());

    const elements = await getElements();

    dispatch(getElementsSuccess(elements));
  } catch (err) {
    dispatch(getElementsFailed(`${err}`));
  }
});

источник

16:02пожаловаться #4

a

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

Maksim Sharov

@artalar обратил внимание, что на воркшопе при подключении модулей ты часто перезапускал приложение, потому что не сразу подхватывались зависимости или типы.

сейчас в процессе миграции сталкиваюсь с аналогичным поведением, когда требуется перезапустить приложение при подключеннии модулей или не сразу подхватываются какие-то изменения

например, после добавления дебаг-модуля два последних экшна в коде логировались успешно, а первый getElementsFetching - нет. я почти отчаялся, и перезапустил приложение и все появилось.

это какой-то плавающий баг или что-то другое?

export const fetchElements = declareAction(async (_, { dispatch }) => {
  try {
    dispatch(getElementsFetching());

    const elements = await getElements();

    dispatch(getElementsSuccess(elements));
  } catch (err) {
    dispatch(getElementsFailed(`${err}`));
  }
});

источник

16:03пожаловаться #5

a

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

Maksim Sharov

@artalar обратил внимание, что на воркшопе при подключении модулей ты часто перезапускал приложение, потому что не сразу подхватывались зависимости или типы.

сейчас в процессе миграции сталкиваюсь с аналогичным поведением, когда требуется перезапустить приложение при подключеннии модулей или не сразу подхватываются какие-то изменения

например, после добавления дебаг-модуля два последних экшна в коде логировались успешно, а первый getElementsFetching - нет. я почти отчаялся, и перезапустил приложение и все появилось.

это какой-то плавающий баг или что-то другое?

export const fetchElements = declareAction(async (_, { dispatch }) => {
  try {
    dispatch(getElementsFetching());

    const elements = await getElements();

    dispatch(getElementsSuccess(elements));
  } catch (err) {
    dispatch(getElementsFailed(`${err}`));
  }
});

Ммм, чет не понял

источник

16:03пожаловаться #6

M

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

artalar

Ммм, чет не понял

написал асинхронный экшн

export const fetchElements = declareAction(async (_, { dispatch }) => {
  try {
    const elements = await getElements();

    dispatch(getElementsSuccess(elements));
  } catch (err) {
    dispatch(getElementsFailed(`${err}`));
  }
});

подключил дебаг-тул и увидел логирование

getElementsSuccess

потом добавил еще один экшн

getElementsFetching

export const fetchElements = declareAction(async (_, { dispatch }) => {
  try {
    dispatch(getElementsFetching());

    const elements = await getElements();

    dispatch(getElementsSuccess(elements));
  } catch (err) {
    dispatch(getElementsFailed(`${err}`));
  }
});

а в редакс-девтуле не отображается новых экшнов, перезапустил и заработало ожидал, пример на скрине

возможно, это связано с перезапуском приложения (стоп-старт)

источник

16:08пожаловаться #7

a

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

Maksim Sharov

написал асинхронный экшн

export const fetchElements = declareAction(async (_, { dispatch }) => {
  try {
    const elements = await getElements();

    dispatch(getElementsSuccess(elements));
  } catch (err) {
    dispatch(getElementsFailed(`${err}`));
  }
});

подключил дебаг-тул и увидел логирование

getElementsSuccess

потом добавил еще один экшн

getElementsFetching

export const fetchElements = declareAction(async (_, { dispatch }) => {
  try {
    dispatch(getElementsFetching());

    const elements = await getElements();

    dispatch(getElementsSuccess(elements));
  } catch (err) {
    dispatch(getElementsFailed(`${err}`));
  }
});

а в редакс-девтуле не отображается новых экшнов, перезапустил и заработало ожидал, пример на скрине

возможно, это связано с перезапуском приложения (стоп-старт)

Может, стор в hotreload обернут, а конект к девтулзам нет?

источник

16:09пожаловаться #8

M

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

artalar

Может, стор в hotreload обернут, а конект к девтулзам нет?

import { createStore } from "@reatom/core";
import { connectReduxDevtools } from "@reatom/debug";

import { elementsAtom } from "./element";

const isProduction = process.env.NODE_ENV === "production";

export const store = createStore(elementsAtom);

export const unsubscribeDevTools = !isProduction && connectReduxDevtools(store);

вот мой стор)

источник

16:10пожаловаться #9

M

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

никаких релоадов, и я store затем передаю сразу в провайдер, unsubscribeDevTools - нигде не используется, код почти как из доков вобщем

источник

16:11пожаловаться #10

a

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

Maksim Sharov

написал асинхронный экшн

export const fetchElements = declareAction(async (_, { dispatch }) => {
  try {
    const elements = await getElements();

    dispatch(getElementsSuccess(elements));
  } catch (err) {
    dispatch(getElementsFailed(`${err}`));
  }
});

подключил дебаг-тул и увидел логирование

getElementsSuccess

потом добавил еще один экшн

getElementsFetching

export const fetchElements = declareAction(async (_, { dispatch }) => {
  try {
    dispatch(getElementsFetching());

    const elements = await getElements();

    dispatch(getElementsSuccess(elements));
  } catch (err) {
    dispatch(getElementsFailed(`${err}`));
  }
});

а в редакс-девтуле не отображается новых экшнов, перезапустил и заработало ожидал, пример на скрине

возможно, это связано с перезапуском приложения (стоп-старт)

А что за перезапуск приложения?

источник

16:14пожаловаться #11

a

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

Чет пока нет идей

источник

16:14пожаловаться #12

M

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

artalar

А что за перезапуск приложения?

yarn stop и yarn start

источник

16:14пожаловаться #13

M

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

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

источник

16:15пожаловаться #14

a

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

Maksim Sharov

yarn stop и yarn start

Те запускаешь дев сервер, открываешь приложение в браузере, что-то делаешь - работает и логируется, обновляешь код, запускаешь его в приложении - работает (чета фетчитсья / отображается), но не логируется?

источник

16:16пожаловаться #15

M

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

artalar

Те запускаешь дев сервер, открываешь приложение в браузере, что-то делаешь - работает и логируется, обновляешь код, запускаешь его в приложении - работает (чета фетчитсья / отображается), но не логируется?

да, было именно так, даже интереснее, какие-то логируются, какие-то нет

источник

16:16пожаловаться #16

a

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

Maksim Sharov

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

“миграция с rtk”?

источник

16:16пожаловаться #17

M

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

artalar

“миграция с rtk”?

что за rtk?

источник

16:16пожаловаться #18

a

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