redux#StoreEnhancer TypeScript Examples

createStore = (compose?: (...middleware: Middleware[]) => StoreEnhancer) => {
  compose = compose || applyMiddleware
  const middleware: Array<Middleware> = [thunkMiddleware]
  const stores = create(reducers, compose(...middleware))
  const thunkDispatch: ThunkDispatch = (action) => stores.dispatch<any>(action)
  const dispatch: Dispatch = (action) => stores.dispatch<any>(action)
  const selector = <T>(selector: (store: IStores) => T) => selector(stores.getState())
  return {
    stores,
    thunkDispatch,
    dispatch,
    selector,
  }
}

constructor(
    domHandle: string | HTMLElement,
    config: DiagramMakerConfig<NodeType, EdgeType>,
    {
      initialData, consumerRootReducer, consumerEnhancer, eventListener,
    }: {
      initialData?: DiagramMakerData<NodeType, EdgeType>,
      consumerRootReducer?: Reducer<DiagramMakerData<NodeType, EdgeType>, Action>,
      consumerEnhancer?: StoreEnhancer,
      eventListener?: ObserverCallback;
    } = {},
  ) {
    this.config = new ConfigService(config);
    this.store = createStore(initialData, consumerRootReducer, consumerEnhancer, this.config.getActionInterceptor());
    this.api = new DiagramMakerApi(this.store);

    this.container = DiagramMaker.getContainer(domHandle);
    this.observer = new Observer();
    if (eventListener) {
      this.observer.subscribeAll(eventListener);
    }
    this.eventManager = new UIEventManager(this.observer, this.container);
    this.actionDispatcher = new ActionDispatcher(this.observer, this.store, this.config);

    render<NodeType, EdgeType>(this.store, this.container, this.config);

    this.updateContainer();
  }

export default function createStore<NodeType, EdgeType>(
  initialData?: DiagramMakerData<NodeType, EdgeType>,
  consumerRootReducer?: Reducer<DiagramMakerData<NodeType, EdgeType>, DiagramMakerAction<NodeType, EdgeType>>,
  consumerEnhancer?: StoreEnhancer,
  actionInterceptor?: ActionInterceptor<NodeType, EdgeType>,
): Store<DiagramMakerData<NodeType, EdgeType>> {
  const interceptorMiddleware = applyMiddleware(createInterceptorMiddleware(actionInterceptor));
  const undoMiddleware = applyMiddleware(getUndoMiddleware());
  const middleware = compose(interceptorMiddleware, undoMiddleware);
  const composedEnhancer = consumerEnhancer
    ? compose(middleware, consumerEnhancer)
    : middleware;

  /**
   * FIXME: Due to this issue: https://github.com/Microsoft/TypeScript/issues/21592
   * The below line needs an "any" typecast. It throws a type error for excessive
   * stack depth otherwise. Also, note that due to the type signatures on the function
   * declaration, type safety is lost within this method, but is retained everywhere else.
   * Remove this when typescript fixes it.
   */

  return reduxCreateStore(
    sequenceReducers<DiagramMakerData<NodeType, EdgeType>, DiagramMakerAction<NodeType, EdgeType>>(
      getRootReducer(),
      layoutReducer,
      consumerRootReducer,
    ),
    initialData as any,
    composedEnhancer,
  );
}

static createStoreMiddleware(isProject: boolean, name: string): StoreEnhancer {
    var storeMiddleware = isProject
      ? applyMiddleware(thunk, reduxPromiseMiddleware, loadingBarMiddleware())
      : applyMiddleware(thunk, reduxPromiseMiddleware);
    if (!windowIso.isSsr) {
      const composeEnhancers =
        windowIso['__REDUX_DEVTOOLS_EXTENSION_COMPOSE__']
          ? windowIso['__REDUX_DEVTOOLS_EXTENSION_COMPOSE__']({
            serialize: true,
            name,
          })
          : compose;
      storeMiddleware = composeEnhancers(storeMiddleware);
    }
    return storeMiddleware;
  }

test('Get custom compose', () => {
  // @ts-expect-error
  const get: typeof store.getCompose = store.getCompose.bind(store);

  expect(get(void 0)).toBe(compose);
  expect(get(compose)).toBe(compose);

  const customCompose = (): StoreEnhancer => '' as any;
  expect(get(customCompose)).toBe(customCompose);

  const devtoolsComposer = composeWithDevTools({
    name: 'x',
  });
  expect(get(devtoolsComposer)).toBe(devtoolsComposer);
  expect(get(composeWithDevTools)).toBe(composeWithDevTools);

  expect(get('redux-devtools')).toBe(compose);

  // @ts-expect-error
  globalThis['__REDUX_DEVTOOLS_EXTENSION_COMPOSE__'] = customCompose;
  expect(get('redux-devtools')).toBe(customCompose);

  const prevEnv = process.env.NODE_ENV;
  process.env.NODE_ENV = 'production';
  expect(get('redux-devtools')).toBe(compose);
  process.env.NODE_ENV = prevEnv;
});

createStore: (compose?: ((...middleware: Middleware[]) => StoreEnhancer) | undefined) => {
    stores: import("redux").Store<import("redux").EmptyObject & {
        user: import("./user/user-reducer").IUserStore;
    }, import("@kazura/react-store").StoreAction<import("./user/user-reducer").IUserStore>>;
    thunkDispatch: ThunkDispatch<AnyAction>;
    dispatch: Dispatch<AnyAction>;
    selector: <T>(selector: (store: IStores) => T) => T;
}

function store(initialiState = {}, reducers={}, enhancers?: StoreEnhancer<any>) {
    const rootReducers = combineReducers({OnlineStatus, SpeedTest, ...reducers});

    const store = createStore(rootReducers, initialiState, enhancers);

    return store;
}

init(options: CreateStoreOptions = {}) {
    const prevStore = this.origin;
    const firstInitialize = !prevStore;

    if (!firstInitialize) {
      if (process.env.NODE_ENV === 'production') {
        throw new Error(`[store] 请勿多次执行'store.init()'`);
      }
    }

    this._isReady = false;
    this.reducer = this.combineReducers();

    const persistOptions = options.persist;
    let persistor = this.persistor;
    persistor && persistor.destroy();
    if (persistOptions && persistOptions.length) {
      persistor = this.persistor = new PersistManager(persistOptions);
      this.reducer = persistor.combineReducer(this.reducer);
    } else {
      persistor = this.persistor = null;
    }

    let store: Store;

    if (firstInitialize) {
      const enhancer: StoreEnhancer<any> = applyMiddleware.apply(
        null,
        (options.middleware || []).concat(modelInterceptor),
      );

      store = this.origin = createStore(
        this.reducer,
        options.preloadedState,
        this.getCompose(options.compose)(enhancer),
      );
      this.topic.publish('init');

      combine(store);
    } else {
      // 重新创建store会导致组件里的subscription都失效
      store = prevStore;
      store.replaceReducer(this.reducer);
    }

    if (persistor) {
      persistor.init(store, firstInitialize).then(() => {
        this.ready();
      });
    } else {
      this.ready();
    }

    return this;
  }