feat(redux-saga): multiple things

- remove redux-promise-middleware
- create makeRequest() instead
- tests for Sagas

Author: paibamboo

package.json

@@ -112,7 +112,6 @@
     "redux": "^3.6.0",
     "redux-connect": "^5.1.0",
     "redux-logger": "^3.0.0",
-    "redux-promise-middleware": "^4.3.0",
     "redux-saga": "^0.15.3",
     "redux-thunk": "^2.2.0",
     "serve-favicon": "^2.3.2",

src/app/containers/Stars.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import {IStars, IStarsAction} from "../models/starsModel";
-import {STARS_LOAD} from "../redux/modules/starsModule";
+import {STARS_REQUEST} from "../redux/modules/starsModule";
 const {connect} = require("react-redux");
 const {asyncConnect} = require("redux-connect");
 
@@ -11,7 +11,7 @@ interface IProps {
 
 @asyncConnect([{
   promise: ({store: {dispatch}}) => {
-    return dispatch({type: STARS_LOAD});
+    return dispatch({type: STARS_REQUEST});
   }
 }])
 @connect(

src/app/helpers/promiseReducer.ts

@@ -2,22 +2,22 @@ import IBaseAction from "../models/IBaseAction";
 
 export default function promiseReducer<TState, TAction>(baseAction: string, state: TState, action: IBaseAction & TAction): TState {
   switch (action.type) {
-    case baseAction + "_PENDING":
+    case baseAction + "_REQUEST":
       return Object.assign({}, state, {
         isFetching: true
       });
 
-    case baseAction + "_FULFILLED":
+    case baseAction + "_SUCCESS":
       return Object.assign({}, state, {
         isFetching: false,
         payload: action.payload
       });
 
-    case baseAction + "_REJECTED":
+    case baseAction + "_FAILURE":
       return Object.assign({}, state, {
         error: true,
         isFetching: false,
-        payload: action.payload
+        message: action.message
       });
 
     default:

src/app/models/IBaseAction.ts

@@ -2,5 +2,6 @@ import {Action} from "redux";
 
 interface IBaseAction extends Action {
   payload?: any;
+  message?: string;
 }
 export default IBaseAction;

src/app/models/starsModel.ts

@@ -1,13 +1,15 @@
 export interface IStars {
   isFetching?: boolean;
   error?: boolean;
+  message?: string;
   payload?: {
     stargazers_count: number;
   };
 }
 
 export interface IStarsAction {
   type: string;
+  message?: string;
   payload?: {
     stargazers_count: number;
   };

src/app/redux/configureStore.ts

@@ -3,7 +3,6 @@ const appConfig = require("../../../config/main");
 import {routerMiddleware} from "react-router-redux";
 import {applyMiddleware, compose, createStore} from "redux";
 import {createLogger} from "redux-logger";
-import reduxPromiseMiddleware from "redux-promise-middleware";
 import createSagaMiddleware from "redux-saga";
 import thunk from "redux-thunk";
 import rootSaga from "../sagas/rootSaga";
@@ -16,7 +15,6 @@ export function configureStore(history: History, initialState?: IStore): Redux.S
   const middlewares: Redux.Middleware[] = [
     routerMiddleware(history),
     thunk,
-    reduxPromiseMiddleware(),
     sagaMiddleware
   ];
 

src/app/redux/modules/starsModule.test.ts

@@ -1,10 +1,10 @@
-import {STARS_REQUEST, starsReducer} from "./starsModule";
+import {STARS_FAILURE, STARS_REQUEST, STARS_SUCCESS, starsReducer} from "./starsModule";
 
 describe("Stars Reducer", () => {
 
   it("handles action of type STARS_REQUEST_PENDING", () => {
     const action = {
-      type: STARS_REQUEST + "_PENDING"
+      type: STARS_REQUEST
     };
     const stateBefore = {};
     const stateAfter = {
@@ -18,7 +18,7 @@ describe("Stars Reducer", () => {
       payload: {
         stargazers_count: 99
       },
-      type: STARS_REQUEST + "_FULFILLED"
+      type: STARS_SUCCESS
     };
     const stateBefore = {};
     const stateAfter = {
@@ -32,7 +32,7 @@ describe("Stars Reducer", () => {
 
   it("handles action of type STARS_REQUEST_REJECTED", () => {
     const action = {
-      type: STARS_REQUEST + "_REJECTED"
+      type: STARS_FAILURE
     };
     const stateBefore = {};
     const stateAfter = {

src/app/redux/modules/starsModule.ts

@@ -2,8 +2,9 @@ import {IStars, IStarsAction} from "models/starsModel";
 import promiseReducer from "../../helpers/promiseReducer";
 
 /** Action Types */
-export const STARS_LOAD: string = "stars/STARS_LOAD";
 export const STARS_REQUEST: string = "stars/STARS_REQUEST";
+export const STARS_SUCCESS: string = "stars/STARS_SUCCESS";
+export const STARS_FAILURE: string = "stars/STARS_FAILURE";
 
 /** Initial State */
 const initialState: IStars = {
@@ -12,5 +13,5 @@ const initialState: IStars = {
 
 /** Reducer */
 export function starsReducer(state: IStars = initialState, action: IStarsAction): IStars {
-  return promiseReducer<IStars, IStarsAction>(STARS_REQUEST, state, action);
+  return promiseReducer<IStars, IStarsAction>("stars/STARS", state, action);
 }

src/app/sagas/TestApi.ts

@@ -1,3 +1,4 @@
+import {Promise} from "es6-promise";
 import {IStars} from "../models/starsModel";
 
 export default class TestApi {

src/app/sagas/makeRequest.test.ts

@@ -0,0 +1,24 @@
+import {Promise} from "es6-promise";
+import {call, put} from "redux-saga/effects";
+import makeRequest from "./makeRequest";
+
+describe("makeRequest", () => {
+  const promiseFunction = () => Promise.resolve("success!");
+  const gen = makeRequest(promiseFunction, "SUCCESS_ACTION", "FAILURE_ACTION");
+
+  it("must call apiMethod", () => {
+    expect(gen.next().value).toEqual(call(promiseFunction));
+  });
+
+  it("must dispatch actionSuccess if promise is resolved", () => {
+    expect(gen.next("data").value).toEqual(put({type: "SUCCESS_ACTION", payload: "data"}));
+  });
+
+  it("must dispatch actionFailure if promise is rejected", () => {
+    expect(gen.throw({message: "error!"}).value).toEqual(put({type: "FAILURE_ACTION", message: "error!"}));
+  });
+
+  it("must be done", () => {
+    expect(gen.next()).toEqual({done: true, value: undefined});
+  });
+});