redux#applyMiddleware TypeScript Examples

export function configureStore(): StoreContainer {
  const reducerManager = createReducerManager({
    authentication: authenticationReducer,
    configuration: configurationReducer,
  });
  const {rootEpic, epicMiddleware, epic$, addEpic} = createEpicManager(
    {},
    authenticationEpic,
    configurationEpic,
  );
  // Create a store with the root reducer function being the one exposed by the manager.

  const action$ = new BehaviorSubject<Action>({type: 'init'});
  const reducer = (
    state: RootStoreState | undefined,
    action: Action<string>,
  ) => {
    action$.next(action);
    return reducerManager.reduce(state, action);
  };
  const store = createStore<RootStoreState, Action<string>, any, any>(
    reducer,
    applyMiddleware(epicMiddleware),
  );
  epicMiddleware.run(rootEpic);

  // Optional: Put the reducer manager on the store so it is easily accessible
  return {
    reducerManager,
    store,
    epic$,
    action$,
    addEpic,
  };
}

devStoreConfig = (preloadedState: Partial<RootState>): Store => {
  const store = createStore(
    rootReducer,
    preloadedState,
    applyMiddleware(thunk, logger, crashReporter),
  );

  // @ts-ignore
  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    // @ts-ignore
    module.hot.accept('../reducers', () => {
      const nextRootReducer = require('../reducers');
      store.replaceReducer(nextRootReducer);
    });
  }

  return store;
}

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,
  );
}

export default function configureStore(history: History, initialState?: AppState): Store {
  const middleware = [
    thunk,
    routerMiddleware(history)
  ];

  const rootReducer = combineReducers({
    ...reducers,
    router: connectRouter(history)
  });

  const enhancers: any[] = [];
  const windowIfDefined = typeof window === 'undefined' ? null : window as any;
  if (windowIfDefined && windowIfDefined.__REDUX_DEVTOOLS_EXTENSION__) {
    enhancers.push(windowIfDefined.__REDUX_DEVTOOLS_EXTENSION__() as any);
  }

  return createStore(
    rootReducer,
    initialState,
    compose(applyMiddleware(...middleware), ...enhancers)
  );
}

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;
  }

createReduxDevtoolsEnhancer = (devtools: boolean = true, name?: string, enableLogger = false) => {
  const composeEnhancers =
    // tslint:disable-next-line: strict-type-predicates
    devtools && typeof window === 'object' && (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
      ? (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
          name,
        })
      : compose

  const enhancer = enableLogger ? composeEnhancers(applyMiddleware(createLogger())) : composeEnhancers()

  return enhancer
}

export default function configureStore(): Store<AppState> {
  const composeEnhancers =
    (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
  const sagaMiddleware = createSagaMiddleware();
  const store = createStore(
    rootReducer,
    composeEnhancers(applyMiddleware(sagaMiddleware))
  );
  sagaMiddleware.run(rootSaga);
  return store;
}

constructor(app: App) {
    this.app = app;
    this.app.on("ready", this.onReady);
    this.app.on("window-all-closed", this.onWindowAllClosed);

    const packageJson = fs.readFileSync(packageJsonPath);
    const packageJsonObject = JSON.parse(packageJson.toString("utf-8"));

    this.version = packageJsonObject.version;

    this.bouyomiChan = new BouyomiChan({
      port: this.bouyomiChanPort,
    });

    const initialState = resumeData();
    this.isAlwaysOnTop = !!initialState.isAlwaysOnTop;
    this.serverRunning = !!initialState.fixedChatUrl;
    const reducer = combineReducers({ app: createAppReducer(initialState), chat: createChatReducer(chatInitialState) });

    const myCreateStore = compose(applyMiddleware(MainProcessMiddleware()))(createStore);

    this.store = myCreateStore(reducer);
  }

finalCreateStore = composeEnhancers(
  applyMiddleware(
    thunk,
    routerMiddleware(history),
    notificationsMiddleware,
    safeStorage,
    providerWatcher,
    addressBookMiddleware,
    currencyValuesStorageMiddleware,
  ),
)

store = (() => {
	const store = createStore(
		combineReducers({
			router: connectRouter(history),
			app: rootReducer(defaultState)
		}),
		compose(
			applyMiddleware(routerMiddleware(history), ...middlewares),
			...(process.env.NODE_ENV === 'development' && devtools
				? [devtools()]
				: [])
		)
	)

	if ((module as any).hot) {
		// Enable Webpack hot module replacement for reducers
		;(module as any).hot.accept('../reducer', () => {
			const nextRootReducer = require('../reducer')
			store.replaceReducer(nextRootReducer)
		})
	}

	return store
})()

configureStore = (): StoreState => {
  const storeLogger = createLogger();
  const state = loadState();
  const store = createStore(rootReducer, state, applyMiddleware(storeLogger));
  store.dispatch(initializeState(state));
  store.subscribe(() => {
    saveState(store.getState());
  });
  return store;
}

configureStore = () => {
  const reduxStore = createStore(
    rootReducer,
    composeWithDevTools(applyMiddleware(...middleware)),
  );

  // @ts-ignore
  epicMiddleware.run(rootEpic);

  return reduxStore;
}

configureStore = () => {
    const store = createStore(
        rootReducer,
        reHydrateStore(),
        composeEnhancers(applyMiddleware(...middlewares)),
    );

    sagaMiddleware.run(rootSaga);
    return store;
}

export default function configureAppStore() {
  return createStore(
    rootReducer,
    process.env.NODE_ENV !== 'production'
      ? applyMiddleware(thunk, createLogger({
        collapsed: (getState, action = {}) => [''].includes(action.type),
      }))
      : applyMiddleware(thunk),
  );
}

start(): void {
    let reducer = this.getReducer();
    let sagas = this.getSagas();
    let sagaMiddleware = createSagaMiddleware();
    this.store = applyMiddleware(
      createPromiseMiddleware(this),
      sagaMiddleware,
    )(createStore)(reducer);
    sagas.forEach(sagaMiddleware.run);
  }

export default function configureStore(preloadedState: PreloadedState<any>) {
  const store = createStore(
    createRootReducer(history), // root reducer with router state
    preloadedState,
    composeWithDevTools(
      applyMiddleware(
        routerMiddleware(history), // for dispatching history actions
        // ... other middlewares ...
      ),
    ),
  );

  return store;
}

export function configureStore(preloadedState: any) {
  const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ trace: true, traceLimit: 25 })
    : compose

  const store: Store<State> = offline(storeOfflineConfig)(createStore)(
    reducers(history) as any,
    preloadedState,
    composeEnhancer(
      applyMiddleware(routerMiddleware(history)),
      applyMiddleware(thunk),
      applyMiddleware(reduxOfflineThunkMiddleware()),
    ),
  )

  return store
}

export function configureStore(preloadedState: any) {
  const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
  const store = createStore(
    rootReducer(history),
    preloadedState,
    composeEnhancer(applyMiddleware(routerMiddleware(history)), applyMiddleware(thunk))
  )

  return store
}

configureStore = () => {
  const preloadedState = {};
  const store = createStore(
    rootReducer,
    preloadedState,
    applyMiddleware(sagaMiddleware),
  );

  sagaMiddleware.run(rootSaga);

  return store;
}

export default function configureStore(preloadedState?) {
    const store = createStore(
        rootReducer,
        preloadedState,
        composeEnhancers(
            applyMiddleware(
                // invariant(),
                ReduxThunk
                // loggerMiddleware
            )
        )
    );

    return store;
}

export default function configureStore(
  preloadedState: Partial<SliceMachineStoreType> = {}
): { store: Store<SliceMachineStoreType>; persistor: Persistor } {
  const middlewares = [sagaMiddleware, routerMiddleware];
  const enhancers = [applyMiddleware(...middlewares)];

  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
  const composeEnhancers =
    process.env.NODE_ENV !== "production" &&
    typeof window === "object" &&
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
      ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
      : compose;

  const rootReducer = createReducer();

  const persistedReducer = persistReducer(persistConfig, rootReducer);
  const store: Store<SliceMachineStoreType> = createStore(
    persistedReducer,
    preloadedState,
    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-call
    composeEnhancers(...enhancers)
  );
  const persistor = persistStore(store);
  sagaMiddleware.run(rootSaga);

  return { store, persistor };
}

export default function configureStore(): any {
    const sagaMiddleware = createSagaMiddleware();
    const store = createStore(rootReducer, compose(applyMiddleware(routerMiddleware(history), sagaMiddleware)));

    sagaMiddleware.run(apiSaga);
    sagaMiddleware.run(userSaga);
    sagaMiddleware.run(feedSaga);

    return store;
}

// ------------------------------------------------------------------------------
// --- Register the main services

// --- Register the store service
registerService(
  STORE_SERVICE,
  new KliveStore(
    createStore(
      rootReducer,
      getInitialAppState(),
      applyMiddleware(forwardToMainMiddleware)
    )
  )
);

store = createStore(
  createRootReducer(hist),
  compose(
    applyMiddleware(
      routerMiddleware(hist),
      createAuthMiddleware(),
      createMeetingMiddleware()
    )
  )
)

configureStore = () =>
  createStore(
    createRootReducer(history),
    undefined,
    composeEnhancers(
      applyMiddleware(
        routerMiddleware(history), // connected-react-router
        thunk as ThunkMiddleware<RootState>, // redux-thunk
      ),
    ),
  )

export default function () {
  if (storeInstance) {
    return storeInstance;
  }

  const configOffline = {
    ...offlineConfig,
    rehydrate: true,
    persistOptions: {
      whitelist: []
    }
  };

  storeInstance = createStore(reducers, {}, compose(applyMiddleware(thunkMiddleware), offline(configOffline)));

  return storeInstance;
}

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,
  }
}

configureStore = () =>
  createStore(
    createRootReducer(history),
    undefined,
    composeEnhancers(
      applyMiddleware(
        routerMiddleware(history), // connected-react-router
        thunk as ThunkMiddleware<RootState>, // redux-thunk
      ),
    ),
  )

store = createStore(
  rootReducer,
  {},
  process.env.NODE_ENV === 'development'
    ? composeWithDevTools(applyMiddleware(thunk))
    : applyMiddleware(thunk)
)