Organize redux store

Author: mitsuruog

src/components/App.connect.tsx

@@ -1,23 +1,18 @@
-import { ActionType } from 'typesafe-actions';
 import { Dispatch } from 'redux';
 import { connect } from 'react-redux';
 
-import * as actions from "../actions";
-
-import { RootState } from "../reducers";
+import { ActionsType, RootStateType } from "../shared/store";
 
 import App from "./App";
 
-type Action = ActionType<typeof actions>;
-
 interface OwnProps {
 }
 
-const mapStateToProps = (state: RootState) => ({
+const mapStateToProps = (state: RootStateType) => ({
   loading: !state.map.ready,
 });
 
-const mapDispatchToProps = (dispatch: Dispatch<Action>, props: OwnProps) => ({
+const mapDispatchToProps = (dispatch: Dispatch<ActionsType>, props: OwnProps) => ({
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(App);
+export default connect(mapStateToProps, mapDispatchToProps)(App);

src/components/Map.connect.tsx

@@ -1,23 +1,18 @@
-import { ActionType } from 'typesafe-actions';
 import { Dispatch, bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
-import * as actions from "../actions";
-
-import { RootState } from "../reducers";
-
-type Action = ActionType<typeof actions>;
+import { ActionsType, RootStateType, actions } from "../shared/store";
 
 import Map from "./Map";
 
 interface OwnProps {
 }
 
-const mapStateToProps = (state: RootState) => ({});
+const mapStateToProps = (state: RootStateType) => ({});
 
-const mapDispatchToProps = (dispatch: Dispatch<Action>, props: OwnProps) => bindActionCreators({
+const mapDispatchToProps = (dispatch: Dispatch<ActionsType>, props: OwnProps) => bindActionCreators({
   getWeather: (lat: number, lng: number) => actions.weatherGetAction(lat, lng),
   mapReady: () => actions.mapReadyAction(),
 }, dispatch);
 
-export default connect(mapStateToProps, mapDispatchToProps)(Map);
+export default connect(mapStateToProps, mapDispatchToProps)(Map);

src/components/Weather.connect.tsx

@@ -1,22 +1,17 @@
-import { ActionType } from 'typesafe-actions';
 import { Dispatch } from 'redux';
 import { connect } from 'react-redux';
 
-import * as actions from "../actions";
+import { ActionsType, RootStateType } from "../shared/store";
 
-import { RootState } from "../reducers";
-
-type Action = ActionType<typeof actions>;
-
-import { Weather, WeatherProps } from "./Weather";
+import { Weather } from "./Weather";
 
 interface OwnProps {
 }
 
-const mapStateToProps = (state: RootState) => ({
+const mapStateToProps = (state: RootStateType) => ({
   weather: state.weather.weather,
 });
 
-const mapDispatchToProps = (dispatch: Dispatch<Action>, props: OwnProps) => ({});
+const mapDispatchToProps = (dispatch: Dispatch<ActionsType>, props: OwnProps) => ({});
 
 export default connect(mapStateToProps, mapDispatchToProps)(Weather);

src/index.tsx

@@ -1,53 +1,13 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import { createStore, applyMiddleware, compose } from "redux";
-import { createEpicMiddleware } from "redux-observable";
 import { Provider } from "react-redux";
-import { ActionType } from "typesafe-actions";
 
 import App from "./components/App.connect";
 
 /**
  * Redux store setup
  */
-import * as actions from "./actions";
-import reducers, { RootState } from "./reducers";
-import epics from "./epics";
-
-type Action = ActionType<typeof actions>;
-
-declare global {
-  interface Window {
-    __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: Function;
-  }
-}
-
-const composeEnhancers = (
-  window && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
-) || compose;
-
-const epicMiddleware = createEpicMiddleware<Action, Action, RootState>();
-
-function configureStore(initialState?: RootState) {
-  // configure middlewares
-  const middlewares = [
-    epicMiddleware,
-  ];
-  // compose enhancers
-  const enhancer = composeEnhancers(
-    applyMiddleware(...middlewares)
-  );
-  // create store
-  return createStore(
-    reducers,
-    initialState,
-    enhancer
-  );
-}
-
-const store = configureStore();
-
-epicMiddleware.run(epics);
+import { store } from "./shared/store";
 
 ReactDOM.render(
   <Provider store={store}>

src/actions/index.ts renamed to src/shared/store/actions/index.ts

@@ -9,7 +9,7 @@ type Action = ActionType<typeof actions>;
 
 import { RootState } from "../reducers";
 
-import { getWeather } from "../shared/services/Api";
+import { getWeather } from "../../services/Api";
 
 const weatherGetEpic: Epic<Action, Action, RootState> = (action$, store) =>
   action$.pipe(

src/constants/index.ts renamed to src/shared/store/constants/index.ts

@@ -0,0 +1,47 @@
+import { applyMiddleware, compose, createStore } from 'redux';
+import { createEpicMiddleware } from 'redux-observable';
+import { ActionType } from 'typesafe-actions';
+
+import * as actions from './actions';
+import epics from './epics';
+import reducers, { RootState } from './reducers';
+
+export type RootStateType = RootState;
+export type ActionsType = ActionType<typeof actions>;
+
+declare global {
+  interface Window {
+    __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: Function;
+  }
+}
+
+const epicMiddleware = createEpicMiddleware<
+  ActionsType,
+  ActionsType,
+  RootState
+  >();
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+
+// Create store
+function configureStore(initialState?: RootStateType) {
+  // configure middlewares
+  const middlewares = [
+    epicMiddleware,
+  ];
+  // compose enhancers
+  const enhancer = composeEnhancers(
+    applyMiddleware(...middlewares)
+  );
+  // create store
+  return createStore(
+    reducers,
+    initialState,
+    enhancer
+  );
+}
+
+const store = configureStore();
+
+epicMiddleware.run(epics);
+
+export { store, actions };