Как стать автором
Обновить
96.2
Карма
0
Рейтинг
dotneter @dotneter

Разработчик

Фильтр комментариев по оценке

Когда то существовало расширение autopager — подгрузка страниц на любом сайте. Поищите, возможно есть сейчас какие нибудь аналоги.
Для отметки просмотренных я использую Stylus


a.post__title_link:visited {
  color:#551A8B !important; 
}

Фильтр комментариев по оценке

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

Заменяем Redux c помощью Observables и React Hooks

Это пара строчек кода


function useStore<TState, TResult>(
  store: SimpleImmutableStore<TState>,
  project: (store: TState) => TResult,
): TResult {

export function useObservable<T, R>(observable: Observable<T>,  
+selector: (value: T) => R): R {
-    const [val, setVal] = useState(observable.get());
+    const [val, setVal] = useState(selector(observable.get()));

    useEffect(() => {
-        return observable.subscribe(setVal);
+        return observable.subscribe(value => setVal(selector(value)));
    }, [observable]);

    return val;
}

Заменяем Redux c помощью Observables и React Hooks

Хоть код и авторский, но добавил вашу правку, спасибо.

Заменяем Redux c помощью Observables и React Hooks

Что бы что то изменилось в observable перед отработкой useEffect должно произошло другое асинхронное событие. Вы можете продемонстрировать такое поведение?

Заменяем Redux c помощью Observables и React Hooks

Этого достаточно просто достичь объявлением одного Observable


readonly state = new Observable({
  todos: [] as Todo[], 
  filter: VisibilityFilter.SHOW_ALL
});

const storeState = useObservable(todoService.state);
const visibleTodos = todoService.getVisibleTodos(storeState.filter);

Заменяем Redux c помощью Observables и React Hooks

Где именно там компактное решение?

С возможным решением можно ознакомится в статье https://habr.com/ru/post/483526/
Будет выглядеть так:


toggleTodo(index: number) {
  this.draft.todos[index].completed = !this.draft.todos[index].completed       
}

Заменяем Redux c помощью Observables и React Hooks

Дальше предлагается краткое описание замены и дальше идёт тот же самый «большой объём кода», только с видом сбоку.

Большой объем кода только из за демонстрации подхода, если обернуть все это в библиотеку получится вполне себе компактное решение.


Щито? Добавить 3 строчки для production и development, чтобы подключить Redux extension — это слишком высокая цена?

Тут речь не про цену подключения, а про использования Redux ради возможности использовать extension.

Заменяем Redux c помощью Observables и React Hooks

Вроде все на месте.
subscribe возвращает функцию


 return () => {
            this._listeners = this._listeners.filter(l => l !== listener);
        };

которая возвращается из useEffect


return observable.subscribe(setVal);

Управление состоянием приложения с RxJS/Immer как простая альтернатива Redux/MobX

С mobx-state-tree я не работал, но когда искал варианты, такое описание стора меня оттолкнуло.


types
    .model({
        name: types.optional(types.string, ""),
        done: types.optional(types.boolean, false)
    })
    .actions(self => ({
        setName(newName) {
            self.name = newName
        },

        toggle() {
            self.done = !self.done
        }
    }))

Управление состоянием приложения с RxJS/Immer как простая альтернатива Redux/MobX

К сожалению невозможно охватить все сразу. Да, для описания удобного кручения иммутабельного состояния ушла целая статья, про это собственно я и хотел написать, но возможно стоило уделить внимание и тем вопросам что вы озвучили. Думаю в будущем будет продолжение, а пока с остальным функционалам можно ознакомиться в репозитории https://github.com/simmor-store/simmor

Управление состоянием приложения с RxJS/Immer как простая альтернатива Redux/MobX

Наверните сверху на _stateHistory какой-нибудь Immutable.js

Зачем сверху наворачивать Immutable.js если с самого начала можно использовать имутабельность? Плюсы это тема для отдельной статьи, что то вы можете почитать например в документации Redux.

Управление состоянием приложения с RxJS/Immer как простая альтернатива Redux/MobX

Логика для обмазывания этим других классов, чтоб каждое изменение состояния дёргало бы updateState — точно такая же, как и у вас.

Статья не про мутабельность vs имутабельность, это отдельная большая тема.
Как я написал в начале, это мое личное предпочтение, на основе моего опыта. Например у вас в _stateHistory хранятся полные копии всех измененных состояний, в случае с иммутабельностью части состояний могли бы переиспользоваться.

Управление состоянием приложения с RxJS/Immer как простая альтернатива Redux/MobX

А зачем? Какой смысл работать с неизменяемый состоянием так, будто оно изменяемое, если можно просто работать с изменяемым?

Смысл в том что Immer это просто утилита


const x = {foo: {bar: 0}}

const y = {foo: {bar: x.foo.bar + 1}}

и


const y = produce(x, draft => draft.foo.bar += 1)

Концептуально ничем не отличаются.


Чем это в итоге отличается от использования обычного useState и его производных? выглядит один в один.

Тем, что данные из стора вы можете использовать в любом компоненте. Для примера можно посмотреть другие вариантами использования https://codesandbox.io/s/github/simmor-store/react-simmor/tree/master/examples


Использование getValue на observabl'ах — code smell и допустимо только в крайних случаях.

К каким проблемам может привести его использование в контексте текущего примера?

Избегание ада с помощью монад

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

Избегание ада с помощью монад

Избегание ада монад с помощью ???

http://okmij.org/ftp/Haskell/extensible/exteff.pdf

Информация

В рейтинге
5,862-й
Откуда
Москва, Москва и Московская обл., Россия
Зарегистрирован
Активность