@reduxjs/toolkit#EnhancedStore TypeScript Examples

addWatchers = (store: EnhancedStore): void => {
  // Call these functions whenever the store changes.
  for (const watcherFunction of watchers) {
    const listen = () => {
      watcherFunction(store.getState());
    };
    // Call once as the app initializes.
    listen();
    // Call every time the store changes.
    store.subscribe(listen);
  }
}

export function observeStore<T = any, S = any, A extends Action<any> = AnyAction, M extends Middlewares<S> = Middlewares<S>>
(   
    store: EnhancedStore<S, A, M>, 
    select: (state: S) => T, 
    onChange: (state: T) => void
) : Unsubscribe
{
    let currentState : any;

    function handleChange() {
        const nextState = select(store.getState());
        if (nextState !== currentState) {
            currentState = nextState;
            onChange(currentState);
        }
    }

    const unsubscribe = store.subscribe(handleChange);
    handleChange();
    return unsubscribe;
}

export function useStore() : EnhancedStore {
    return useEpiserver().getStore();
}

public getStore(): EnhancedStore {
        this.enforceInitialized();
        return this._state;
    }

protected _state!: EnhancedStore;

export function setLanguage<S = any, A extends Action<any> = AnyAction, M extends Middlewares<S> = Middlewares<S>>(newLanguage: string, store: EnhancedStore<S,A,M>) : void
{
    const action : A = {
        type: 'OptiContentCloud/SetState',
        currentLanguage: newLanguage
    } as unknown as A;
    store.dispatch(action);
}

export declare function useStore(): EnhancedStore;

getStore(): EnhancedStore;

protected _state: EnhancedStore;

export declare function observeStore<T = any, S = any, A extends Action<any> = AnyAction, M extends Middlewares<S> = Middlewares<S>>(store: EnhancedStore<S, A, M>, select: (state: S) => T, onChange: (state: T) => void): Unsubscribe;

export declare function setLanguage<S = any, A extends Action<any> = AnyAction, M extends Middlewares<S> = Middlewares<S>>(newLanguage: string, store: EnhancedStore<S, A, M>): void;

reduxTester = <State>(args?: ReduxTesterArguments<State>): ReduxTesterGiven<State> => {
  const dispatchedActions: AnyAction[] = [];
  const logActionsMiddleWare: Middleware<{}, Partial<StoreState>> = (
    store: MiddlewareAPI<Dispatch, Partial<StoreState>>
  ) => (next: Dispatch) => (action: AnyAction) => {
    // filter out thunk actions
    if (action && typeof action !== 'function') {
      dispatchedActions.push(action);
    }

    return next(action);
  };

  const preloadedState = args?.preloadedState ?? (({} as unknown) as State);
  const debug = args?.debug ?? false;
  let store: EnhancedStore<State> | null = null;

  const givenRootReducer = (rootReducer: Reducer<State>): ReduxTesterWhen<State> => {
    store = configureStore<State>({
      reducer: rootReducer,
      middleware: [logActionsMiddleWare, thunk],
      preloadedState,
    });
    setStore(store as any);

    return instance;
  };

  const whenActionIsDispatched = (
    action: any,
    clearPreviousActions?: boolean
  ): ReduxTesterWhen<State> & ReduxTesterThen<State> => {
    if (clearPreviousActions) {
      dispatchedActions.length = 0;
    }
    store.dispatch(action);

    return instance;
  };

  const whenAsyncActionIsDispatched = async (
    action: any,
    clearPreviousActions?: boolean
  ): Promise<ReduxTesterWhen<State> & ReduxTesterThen<State>> => {
    if (clearPreviousActions) {
      dispatchedActions.length = 0;
    }

    await store.dispatch(action);

    return instance;
  };

  const thenDispatchedActionShouldEqual = (...actions: AnyAction[]): ReduxTesterWhen<State> => {
    if (debug) {
      console.log('Dispatched Actions', JSON.stringify(dispatchedActions, null, 2));
    }

    if (!actions.length) {
      throw new Error('thenDispatchedActionShouldEqual has to be called with at least one action');
    }

    expect(dispatchedActions).toEqual(actions);
    return instance;
  };

  const thenDispatchedActionPredicateShouldEqual = (
    predicate: (dispatchedActions: AnyAction[]) => boolean
  ): ReduxTesterWhen<State> => {
    if (debug) {
      console.log('Dispatched Actions', JSON.stringify(dispatchedActions, null, 2));
    }

    expect(predicate(dispatchedActions)).toBe(true);
    return instance;
  };

  const instance = {
    givenRootReducer,
    whenActionIsDispatched,
    whenAsyncActionIsDispatched,
    thenDispatchedActionShouldEqual,
    thenDispatchedActionPredicateShouldEqual,
  };

  return instance;
}