🎉 Bump up to redux-observable to 1.0.0!!

mitsuruog · mitsuruog · commit 4ec6434b846f · 2018-11-30T21:50:11.000+09:00
diff --git a/dist/bundle.js b/dist/bundle.js
diff --git a/dist/bundle.js.map b/dist/bundle.js.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,26 +12,26 @@
   "author": "mitsuru.ogawa.jp@gmail.com",
   "license": "MIT",
   "dependencies": {
-    "@types/googlemaps": "^3.30.7",
-    "@types/react": "^16.0.38",
-    "@types/react-dom": "^16.0.4",
-    "@types/react-redux": "^5.0.15",
-    "@types/redux": "^3.6.0",
+    "@types/googlemaps": "^3.30.16",
+    "@types/react": "^16.7.9",
+    "@types/react-dom": "^16.0.11",
+    "@types/react-redux": "^6.0.10",
+    "@types/redux": "^3.6.31",
     "@types/scriptjs": "0.0.2",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "react-redux": "^5.0.7",
-    "redux": "^3.7.2",
-    "redux-observable": "^0.18.0",
-    "rxjs": "^5.5.6",
-    "scriptjs": "^2.5.8",
-    "typesafe-actions": "^1.1.2"
+    "react": "^16.2.3",
+    "react-dom": "^16.2.3",
+    "react-redux": "^5.1.1",
+    "redux": "^4.0.1",
+    "redux-observable": "^1.0.0",
+    "rxjs": "^6.3.3",
+    "scriptjs": "^2.5.9",
+    "typesafe-actions": "^2.0.4"
   },
   "devDependencies": {
-    "awesome-typescript-loader": "^3.4.1",
-    "redux-devtools": "^3.4.1",
-    "source-map-loader": "^0.2.3",
-    "typescript": "^2.7.2",
-    "webpack": "^3.11.0"
+    "awesome-typescript-loader": "^5.2.1",
+    "source-map-loader": "^0.2.4",
+    "typescript": "^3.2.1",
+    "webpack": "^4.26.1",
+    "webpack-cli": "^3.1.2"
   }
 }
diff --git a/src/actions/index.ts b/src/actions/index.ts
@@ -4,31 +4,15 @@ import {
   WEATHER_GET,
   WEATHER_SET,
   MAP_READY,
+  WEATHER_ERROR,
 } from "../constants";
 
-export interface Action {
-  type: string;
-  payload?: {};
-  params?: {};
-}
+import Weather from "../shared/models/Weather";
 
-export interface WeatherAction extends Action {
-  params: {
-    lat: number;
-    lng: number;
-  };
-}
+export const weatherGetAction = createAction(WEATHER_GET, resolve => (lat: number, lng: number) => resolve({ lat, lng }));
 
-export const weatherGetAction = createAction(WEATHER_GET, (params = {}) => ({
-  type: WEATHER_GET,
-  params,
-}));
+export const weatherSetAction = createAction(WEATHER_SET, resolve => (weather: Response) => resolve(weather));
 
-export const weatherSetAction = createAction(WEATHER_SET, (payload = {}) => ({
-  type: WEATHER_SET,
-  payload,
-}));
+export const weatherErrorAction = createAction(WEATHER_ERROR, resolve => (error: Error) => resolve(error));
 
-export const mapReadyAction = createAction(MAP_READY, () => ({
-  type: MAP_READY
-}));
+export const mapReadyAction = createAction(MAP_READY);
diff --git a/src/components/App.connect.tsx b/src/components/App.connect.tsx
@@ -1,8 +1,14 @@
-import { connect } from "react-redux";
+import { ActionType } from 'typesafe-actions';
+import { Dispatch } from 'redux';
+import { connect } from 'react-redux';
+
+import * as actions from "../actions";
 
 import { RootState } from "../reducers";
 
-import App, { AppProps } from "./App";
+import App from "./App";
+
+type Action = ActionType<typeof actions>;
 
 interface OwnProps {
 }
@@ -11,10 +17,7 @@ const mapStateToProps = (state: RootState) => ({
   loading: !state.map.ready,
 });
 
-const mapDispatchToProps = (dispatch: Function, props: OwnProps) => ({
+const mapDispatchToProps = (dispatch: Dispatch<Action>, props: OwnProps) => ({
 });
 
-export default connect<{}, {}, AppProps>(
-  mapStateToProps,
-  mapDispatchToProps,
-)(App) as React.ComponentClass<OwnProps>
+export default connect(mapStateToProps, mapDispatchToProps)(App);
diff --git a/src/components/Map.connect.tsx b/src/components/Map.connect.tsx
@@ -1,21 +1,23 @@
-import { connect } from "react-redux";
+import { ActionType } from 'typesafe-actions';
+import { Dispatch, bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
 
-import { weatherGetAction, mapReadyAction } from "../actions"
-import { RootState } from "../reducers"
+import * as actions from "../actions";
 
-import Map, { MapProps } from "./Map";
+import { RootState } from "../reducers";
+
+type Action = ActionType<typeof actions>;
+
+import Map from "./Map";
 
 interface OwnProps {
 }
 
 const mapStateToProps = (state: RootState) => ({});
 
-const mapDispatchToProps = (dispatch: Function, props: OwnProps) => ({
-  getWeather: (payload: {}) => dispatch(weatherGetAction(payload)),
-  mapReady: () => dispatch(mapReadyAction()),
-});
+const mapDispatchToProps = (dispatch: Dispatch<Action>, props: OwnProps) => bindActionCreators({
+  getWeather: (lat: number, lng: number) => actions.weatherGetAction(lat, lng),
+  mapReady: () => actions.mapReadyAction(),
+}, dispatch);
 
-export default connect<{}, {}, MapProps>(
-  mapStateToProps,
-  mapDispatchToProps,
-)(Map) as React.ComponentClass<OwnProps>
+export default connect(mapStateToProps, mapDispatchToProps)(Map);
diff --git a/src/components/Map.tsx b/src/components/Map.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import * as scriptjs from "scriptjs";
 
 export interface MapProps {
-  getWeather: Function;
+  getWeather: (lat: number, lng: number) => undefined;
   mapReady: Function;
 }
 
@@ -45,10 +45,10 @@ export default class Map extends React.Component<MapProps, MapState> {
     });
 
     this.map.addListener("click", (event) => {
-      this.props.getWeather({
-        lat: event.latLng.lat(),
-        lng: event.latLng.lng(),
-      });
+      this.props.getWeather(
+        event.latLng.lat(),
+        event.latLng.lng(),
+      );
     });
 
     this.props.mapReady();
diff --git a/src/components/Weather.connect.tsx b/src/components/Weather.connect.tsx
@@ -1,6 +1,12 @@
-import { connect } from "react-redux";
+import { ActionType } from 'typesafe-actions';
+import { Dispatch } from 'redux';
+import { connect } from 'react-redux';
 
-import { RootState } from "../reducers"
+import * as actions from "../actions";
+
+import { RootState } from "../reducers";
+
+type Action = ActionType<typeof actions>;
 
 import { Weather, WeatherProps } from "./Weather";
 
@@ -11,9 +17,6 @@ const mapStateToProps = (state: RootState) => ({
   weather: state.weather.weather,
 });
 
-const mapDispatchToProps = (dispatch: Function, props: OwnProps) => ({});
+const mapDispatchToProps = (dispatch: Dispatch<Action>, props: OwnProps) => ({});
 
-export default connect<{}, {}, WeatherProps>(
-  mapStateToProps,
-  mapDispatchToProps,
-)(Weather) as React.ComponentClass<OwnProps>
+export default connect(mapStateToProps, mapDispatchToProps)(Weather);
diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -1,3 +1,4 @@
 export const MAP_READY   = "@@map/READY";
 export const WEATHER_GET = "@@weather/GET";
 export const WEATHER_SET = "@@weather/SET";
+export const WEATHER_ERROR = "@@weather/ERROR";
diff --git a/src/epics/WeatherEpic.ts b/src/epics/WeatherEpic.ts
@@ -1,27 +1,26 @@
-import "rxjs/add/operator/map";
-import "rxjs/add/operator/mergeMap";
 import { Epic } from "redux-observable";
+import { from, of } from 'rxjs';
+import { switchMap, filter, map, catchError, mergeMap } from 'rxjs/operators';
+import { ActionType, isOfType, getType } from 'typesafe-actions';
 
-import { RootState } from "../reducers";
+import * as actions from "../actions";
 
-import {
-  Action,
-  WeatherAction,
-  weatherSetAction,
-} from "../actions";
+type Action = ActionType<typeof actions>;
 
-import {
-  WEATHER_GET,
-} from "../constants";
+import { RootState } from "../reducers";
 
 import { getWeather } from "../shared/services/Api";
 
-const weatherGetEpic: Epic<Action, RootState> = (action$, state) =>
-  action$.ofType(WEATHER_GET)
-    .mergeMap((action: WeatherAction) =>
-      getWeather(action.params.lat, action.params.lng)
-        .map(payload => weatherSetAction(payload))
-    );
+const weatherGetEpic: Epic<Action, Action, RootState> = (action$, store) =>
+  action$.pipe(
+    filter(isOfType(getType(actions.weatherGetAction))),
+    switchMap(action =>
+      from(getWeather(action.payload.lat, action.payload.lng)).pipe(
+        map(actions.weatherSetAction),
+        catchError(error => of(actions.weatherErrorAction(error)))
+      ),
+    )
+  );
 
 export default [
   weatherGetEpic,
diff --git a/src/index.tsx b/src/index.tsx
@@ -3,15 +3,19 @@ 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;
@@ -22,26 +26,29 @@ const composeEnhancers = (
   window && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
 ) || compose;
 
+const epicMiddleware = createEpicMiddleware<Action, Action, RootState>();
+
 function configureStore(initialState?: RootState) {
   // configure middlewares
   const middlewares = [
-    createEpicMiddleware(epics),
+    epicMiddleware,
   ];
   // compose enhancers
-  const enhancer    = composeEnhancers(
+  const enhancer = composeEnhancers(
     applyMiddleware(...middlewares)
   );
   // create store
   return createStore(
     reducers,
-    initialState!,
+    initialState,
     enhancer
   );
 }
 
-
 const store = configureStore();
 
+epicMiddleware.run(epics);
+
 ReactDOM.render(
   <Provider store={store}>
     <App />
diff --git a/src/reducers/MapReducer.ts b/src/reducers/MapReducer.ts
@@ -1,13 +1,11 @@
-import {
-  MAP_READY,
-} from "../constants";
+import { ActionType, getType } from 'typesafe-actions';
 
-import {
-  Action,
-} from "../actions";
+import * as actions from "../actions";
+
+type Action = ActionType<typeof actions>;
 
 export interface MapState {
-  ready: boolean;
+  readonly ready: boolean;
 }
 
 const initialState = {
@@ -18,7 +16,7 @@ export const mapReducer = (state: MapState = initialState, action: Action): MapS
 
   switch (action.type) {
 
-    case MAP_READY:
+    case getType(actions.mapReadyAction):
       return Object.assign({}, state, { ready: true });
 
     default:
diff --git a/src/reducers/WeatherReducer.ts b/src/reducers/WeatherReducer.ts
@@ -1,16 +1,14 @@
-import Weather from "../shared/models/Weather";
+import { ActionType, getType } from 'typesafe-actions';
+
+import * as actions from "../actions";
 
-import {
-  WEATHER_SET,
-} from "../constants";
+type Action = ActionType<typeof actions>;
 
-import {
-  Action,
-} from "../actions";
+import Weather from "../shared/models/Weather";
 
 export interface WeatherState {
-  loading: boolean;
-  weather?: Weather;
+  readonly loading: boolean;
+  readonly weather?: Weather;
 }
 
 const initialState = {
@@ -21,9 +19,13 @@ export const weatherReducer = (state: WeatherState = initialState, action: Actio
 
   switch (action.type) {
 
-    case WEATHER_SET:
+    case getType(actions.weatherSetAction):
       return Object.assign({}, state, { weather: new Weather(action.payload) });
 
+    case getType(actions.weatherErrorAction):
+      console.error(action.payload.message);
+      return state;
+
     default:
       return state;
   }
diff --git a/src/shared/services/Api.ts b/src/shared/services/Api.ts
@@ -1,10 +1,6 @@
-import "rxjs/add/observable/from";
-import { Observable } from "rxjs/Observable";
-
 const getWeather = (lat: number, lon: number) => {
-  const request = fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&units=metric&APPID=49f8541c5e9d0758175574596d1f532e`)
+  return fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&units=metric&APPID=49f8541c5e9d0758175574596d1f532e`)
     .then(response => response.json());
-  return Observable.from(request);
 };
 
 export {
