问从减速机挂钩保存到localStorage

EN

@Effect()
myAction$: Observable<Action> = this.actions$.pipe(
  ofType<MyAction>(actions.myAction),
  debounceTime(300),
  switchMap((action) =>
    this.service.post(action.dto).pipe(
      map((response: SomeDto) => {
        // This updates the state using a reducer
        return new CreateShortenedLinkSuccess(response);
      }),
      tap((value) => {
        // Here, you can use the value param, to save
        // changes to localStorage
        this.router.navigate([`/mgmt/link/${value.dto.id}`]);
      }),
      catchError((response: HttpErrorResponse) => {
        // Do scary stuff
      })
    )
  )
);

import { useReducer, useEffect, Dispatch } from 'react'

// Credits: https://stackoverflow.com/questions/54346866/save-to-localstorage-from-reducer-hook
export type ReducerType<T> = (state: T, action: ActionType) => (T)
export type InitType<T> = (state: T) => void
export interface ActionType {
    type: string
}

var dispatcher:Dispatch<ActionType> | null = null

const LOCAL_STORAGE_UPDATED_IN_A_DIFFERENT_WINDOW = "LOCAL_STORAGE_UPDATED_IN_A_DIFFERENT_WINDOW"
export function useLocallyPersistedReducer<T>
    (reducer: ReducerType<T>, defaultState: T, storageKey: string, init?:InitType<T>) : [T, Dispatch<ActionType>] {

    const reducerWrapper = (status: T, action: ActionType) => {
        switch (action.type){
            case LOCAL_STORAGE_UPDATED_IN_A_DIFFERENT_WINDOW:
                const statusReadFromLocalStorage = JSON.parse(localStorage.getItem(storageKey) || "{}")
                return statusReadFromLocalStorage
            default: return reducer(status, action)
        }
    }

    const [state, dispatch] = useReducer(reducerWrapper, defaultState, (defaultState) => {
        const persisted = JSON.parse(localStorage.getItem(storageKey) as string)
        return persisted !== null
            ? persisted
            : init ? init(defaultState) : defaultState
    })

    // NOTE Even if this codes runs multiple time we add only one event listener as long as the callback is singleton
    dispatcher = dispatch
    window.addEventListener('storage', listenForStorageChangesInOtherWindows, {once: true});

    useEffect(() => {
        localStorage.setItem(storageKey, JSON.stringify(state))
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [localStorage, storageKey, state])

    return [state, dispatch]
}

const listenForStorageChangesInOtherWindows = (key: any) => {
    dispatcher && dispatcher({type: LOCAL_STORAGE_UPDATED_IN_A_DIFFERENT_WINDOW})
}