feat(redux-saga): ssr with redux-saga

Author: paibamboo

src/app/containers/Stars.test.tsx

@@ -1,23 +1,32 @@
 import {renderComponent} from "../helpers/TestHelper";
 import {Stars} from "./Stars";
 
-/** Mock App. State */
-const state: object = {
-  stars: {
-    isFetching: false,
-    payload: {
-      stargazers_count: 61
-    }
-  }
-};
-
-describe("<Counter />", () => {
-
-  const component = renderComponent(Stars, state);
-
-  it("Renders header", () => {
-    expect(component.find("div")).toBeDefined();
-    // expect(component.find("div")).toHaveText("61");
+describe("<Stars />", () => {
+
+  it("Renders stars", () => {
+    const state: object = {
+      stars: {
+        payload: {
+          stargazers_count: 61
+        }
+      }
+    };
+
+    const component = renderComponent(Stars, state);
+
+    expect(component.find("div")).toHaveText("61");
+  });
+
+  it("Renders fetching", () => {
+    const state: object = {
+      stars: {
+        payload: null
+      }
+    };
+
+    const component = renderComponent(Stars, state);
+
+    expect(component.find("div")).toHaveText("Fetching Stars..");
   });
 
 });

src/app/containers/Stars.tsx

@@ -16,15 +16,16 @@ interface IProps {
 )
 class Stars extends React.Component<IProps, {}> {
   public componentWillMount(): void {
-    this.props.getStars();
+    if (!this.props.stars.payload) {
+      this.props.getStars();
+    }
   }
 
   public render(): JSX.Element {
     const {stars} = this.props;
-
     return (
       <div>
-        {stars.isFetching ? "Fetching Stars" : stars.payload.stargazers_count}
+        {stars.payload ? stars.payload.stargazers_count : "Fetching Stars.."}
       </div>
     );
   }

src/app/helpers/promiseReducer.ts

@@ -4,19 +4,17 @@ export default function promiseReducer<TState, TAction>(baseAction: string, stat
   switch (action.type) {
     case baseAction + "_REQUEST":
       return Object.assign({}, state, {
-        isFetching: true
+        payload: null
       });
 
     case baseAction + "_SUCCESS":
       return Object.assign({}, state, {
-        isFetching: false,
         payload: action.payload
       });
 
     case baseAction + "_FAILURE":
       return Object.assign({}, state, {
         error: true,
-        isFetching: false,
         message: action.message
       });
 

src/app/models/starsModel.ts

@@ -1,5 +1,4 @@
 export interface IStars {
-  isFetching?: boolean;
   error?: boolean;
   message?: string;
   payload?: {

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

@@ -5,7 +5,7 @@ describe("Stars Reducer", () => {
   it("handles action of type STARS_REQUEST", () => {
     const action = { type: STARS_REQUEST };
     const stateBefore = {};
-    const stateAfter = { isFetching: true };
+    const stateAfter = { payload: null };
     expect(starsReducer(stateBefore, action)).toEqual(stateAfter);
   });
 
@@ -18,7 +18,6 @@ describe("Stars Reducer", () => {
     };
     const stateBefore = {};
     const stateAfter = {
-      isFetching: false,
       payload: {
         stargazers_count: 99
       }
@@ -29,14 +28,14 @@ describe("Stars Reducer", () => {
   it("handles action of type STARS_FAILURE", () => {
     const action = { type: STARS_FAILURE };
     const stateBefore = {};
-    const stateAfter = { error: true, isFetching: false };
+    const stateAfter = { error: true};
     expect(starsReducer(stateBefore, action)).toEqual(stateAfter);
   });
 
   it("handles actions with unknown type", () => {
     const action = { type: "" };
-    const stateBefore = { isFetching: false };
-    const stateAfter = { isFetching: false };
+    const stateBefore = { payload: null };
+    const stateAfter = { payload: null };
     expect(starsReducer(stateBefore, action)).toEqual(stateAfter);
   });
 

src/app/redux/modules/starsModule.ts

@@ -8,10 +8,7 @@ export const STARS_FAILURE: string = "stars/STARS_FAILURE";
 
 /** Initial State */
 const initialState: IStars = {
-  isFetching: false,
-  payload: {
-    stargazers_count: -1
-  }
+  payload: null
 };
 
 /** Reducer */

src/server.tsx

@@ -60,20 +60,16 @@ app.get("*", (req, res) => {
         res.redirect(302, redirectLocation.pathname + redirectLocation.search);
       } else if (renderProps) {
         store.runSaga(rootSaga).done.then(() => {
-          // store will be mutated during the second render (because of componentDidMount)
-          // deep clone state
+          // deep clone state because store will be mutated during the second render in componentWillMount
           const initialState = JSON.parse(JSON.stringify(store.getState()));
-          console.info("before markup => store.stars = " + JSON.stringify(store.getState().stars));
+
+          // render again from the initial data
           const markup = renderToString(
             <Provider store={store} key="provider">
               <RouterContext {...renderProps} />
             </Provider>
           );
-          console.info("after markup => store.stars = " + JSON.stringify(store.getState().stars));
-          console.info("--------------------------------");
-          console.info("--------------------------------");
-          console.info("--------------------------------");
-          console.info("markup = " + markup);
+
           if (appConfig.ssr) {
             res.status(200).send(renderHTML(markup, initialState));
           } else {
@@ -88,12 +84,13 @@ app.get("*", (req, res) => {
           res.status(500).send(err.message);
         });
 
-        console.info("before renderToString => state.stars = " + JSON.stringify(store.getState().stars));
+        // first render to activate componentWillMount to dispatch actions for loading initial data
         renderToString(
           <Provider store={store} key="provider">
             <RouterContext {...renderProps} />
           </Provider>
         );
+        // dispatching END will cause the root saga to terminate after all fired tasks terminate
         store.close();
       } else {
         res.status(404).send("Not Found?");