Add support for universal fetching of data, fetch todos from server in TodoContainer

Author: calvinl

.env.example

@@ -2,6 +2,9 @@
 # The main port to run the server on
 APPLICATION_PORT=3000
 
+# The absolute URL to the application.
+APPLICATION_BASE_URL=http://localhost:3000
+
 # The primary asset host for JS, CSS, and images.  This can be changed to a CDN
 # URL. If serving assets locally, it should be the same as WEBPACK_OUTPUT_PATH
 # below. This env variable only takes effect in production mode.

README.md

@@ -72,6 +72,15 @@ component with the same name, for example:
 This project supports the awesome [Redux Devtools Extension](https://github.com/zalmoxisus/redux-devtools-extension). Install the
 Chrome or Firefox extension and it should just work.
 
+## Server Side Rendering (SSR) and Asynchronous Data Fetching
+When rendering components on the server, you'll find that you may need to fetch
+some data before it can be rendered. The [server code](server/server.js) looks
+for a `fetchData` method on the container component and its child components,
+then executes all of them and only renders after the promises have all been
+resolved.
+
+See the [TodosContainer](common/js/containers/Todos/index.js) for an example.
+
 ## Writing Tests
 The default testing framework is Mocha, though you can use whatever you want.
 Make sure you have it installed:

common/js/actions/todos.js

@@ -1,6 +1,25 @@
-import { ADD_TODO, REMOVE_TODO, TOGGLE_TODO } from 'constants';
+import {
+  ADD_TODO, REMOVE_TODO, TOGGLE_TODO,
+  FETCH_TODOS_REQUEST, FETCH_TODOS_SUCCESS, FETCH_TODOS_FAILURE
+} from 'constants/index';
+import { fetch } from 'lib/api';
 import generateActionCreator from 'lib/generateActionCreator';
 
 export const addTodo = generateActionCreator(ADD_TODO, 'text');
 export const removeTodo = generateActionCreator(REMOVE_TODO, 'id');
 export const toggleTodo = generateActionCreator(TOGGLE_TODO, 'id');
+
+export const fetchTodosRequest = generateActionCreator(FETCH_TODOS_REQUEST);
+export const fetchTodosSuccess = generateActionCreator(FETCH_TODOS_SUCCESS, 'todos');
+export const fetchTodosFailure = generateActionCreator(FETCH_TODOS_FAILURE, 'error');
+
+export const fetchTodos = () => {
+  return (dispatch) => {
+    dispatch(fetchTodosRequest());
+
+    return fetch('/api/todos', { method: 'GET' })
+      .then(res => res.json())
+      .then(todos => dispatch(fetchTodosSuccess(todos)))
+      .catch(error => dispatch(fetchTodosFailure(error)));
+  };
+};

common/js/constants/index.js

@@ -1,3 +1,7 @@
 export const ADD_TODO = 'ADD_TODO';
 export const REMOVE_TODO = 'REMOVE_TODO';
 export const TOGGLE_TODO = 'TOGGLE_TODO';
+
+export const FETCH_TODOS_REQUEST = 'FETCH_TODOS_REQUEST';
+export const FETCH_TODOS_SUCCESS = 'FETCH_TODOS_SUCCESS';
+export const FETCH_TODOS_FAILURE = 'FETCH_TODOS_FAILURE';

common/js/containers/Todos/index.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { addTodo, toggleTodo, removeTodo } from 'actions/todos';
+import { addTodo, toggleTodo, removeTodo, fetchTodos } from 'actions/todos';
 import { Container, Header, Checkbox, List, Button, Form } from 'semantic-ui-react';
 import classnames from 'classnames';
 import css from './index.scss';
@@ -11,11 +11,19 @@ const cx = classnames.bind(css);
 class TodosContainer extends Component {
 
   static propTypes = {
-    todos: PropTypes.array.isRequired,
+    todos: PropTypes.object.isRequired,
     dispatch: PropTypes.func.isRequired
   }
 
-  state = { todoText: null };
+  state = { todoText: '' };
+
+  componentDidMount() {
+    const { dispatch, todos: { isFetched } } = this.props;
+
+    if (!isFetched) {
+      dispatch(fetchTodos());
+    }
+  }
 
   submitTodo = (ev) => {
     const { dispatch } = this.props;
@@ -43,7 +51,7 @@ class TodosContainer extends Component {
   }
 
   render() {
-    const { todos } = this.props;
+    const { todos: { todos } } = this.props;
     const { todoText } = this.state;
 
     return (
@@ -63,7 +71,11 @@ class TodosContainer extends Component {
                   />
                 </List.Content>
                 <List.Content floated="left">
-                  <Checkbox type="checkbox" onChange={() => this.checkTodo(id)} />
+                  <Checkbox
+                    type="checkbox"
+                    checked={completed}
+                    onChange={() => this.checkTodo(id)}
+                  />
                 </List.Content>
                 <List.Content className={cx(css.text, { [css.completed]: completed })}>
                   {text}
@@ -76,7 +88,7 @@ class TodosContainer extends Component {
           <Form.Group>
             <Form.Input
               onChange={this.onTodoChange}
-              value={todoText} 
+              value={todoText}
               type="text"
               placeholder="Add a todo..." />
             <Form.Button content="Add" icon="plus" />
@@ -87,8 +99,10 @@ class TodosContainer extends Component {
   }
 }
 
-const mapStateToProps = (state) => ({
-  todos: state.todos
-});
+TodosContainer.fetchData = ({ store }) => {
+  return store.dispatch(fetchTodos());
+};
+
+const mapStateToProps = ({ todos }) => ({ todos });
 
 export default connect(mapStateToProps)(TodosContainer);

common/js/lib/api.js

@@ -0,0 +1,6 @@
+import isomorphicFetch from 'isomorphic-fetch';
+
+const apiUrl = process.env.APPLICATION_BASE_URL || '';
+
+// Overrides the fetch() method to add the base API url to the front.
+export const fetch = (url, ...rest) => isomorphicFetch(apiUrl + url, ...rest);

common/js/reducers/todos.js

@@ -1,22 +1,50 @@
-import { ADD_TODO, REMOVE_TODO, TOGGLE_TODO } from 'constants';
+import {
+  ADD_TODO, REMOVE_TODO, TOGGLE_TODO,
+  FETCH_TODOS_REQUEST, FETCH_TODOS_SUCCESS, FETCH_TODOS_FAILURE
+} from 'constants/index';
 
-const defaultState = [];
+const defaultState = {
+  todos: [],
+  isFetching: false,
+  isFetched: false,
+  error: null
+};
 
 const todos = (state = defaultState, action) => {
   switch (action.type) {
     case ADD_TODO:
-      return [...state, { id: Date.now(), text: action.text, completed: false }];
+      return {
+        ...state,
+        todos: [
+          ...state.todos, { id: Date.now(), text: action.text, completed: false }
+        ]
+      };
 
     case REMOVE_TODO:
-      return state.filter(todo => todo.id !== action.id);
+      return {
+        ...state,
+        todos: state.todos.filter(todo => todo.id !== action.id)
+      };
 
     case TOGGLE_TODO:
-      return state.map(todo => {
-        if (todo.id === action.id) {
-          return { ...todo, completed: !todo.completed };
-        }
-        return todo;
-      });
+      return {
+        ...state,
+        todos: state.todos.map(todo => {
+          if (todo.id === action.id) {
+            return { ...todo, completed: !todo.completed };
+          }
+          return todo;
+        })
+      };
+
+    case FETCH_TODOS_REQUEST:
+      return { ...state, isFetching: true, isFetched: false };
+
+    case FETCH_TODOS_SUCCESS:
+      return { ...state, todos: action.todos, isFetching: false, isFetched: true };
+
+    case FETCH_TODOS_FAILURE:
+      return { ...state, isFetching: false, isFetched: false, error: action.error };
 
     default:
       return state;

webpack/base.js

@@ -5,7 +5,8 @@ import isomorphicConfig from './isomorphic';
 import IsomorphicPlugin from 'webpack-isomorphic-tools/plugin';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import {
-  ANALYZE, NODE_ENV, WEBPACK_OUTPUT_PATH, ASSET_URL, RESOLVE_PATHS
+  ANALYZE, NODE_ENV, WEBPACK_OUTPUT_PATH, ASSET_URL, RESOLVE_PATHS,
+  APPLICATION_BASE_URL
 } from './constants';
 
 const isDev = NODE_ENV === 'development';
@@ -16,7 +17,8 @@ const plugins = [
   new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /en|es/),
   new webpack.DefinePlugin({
     'process.env': {
-      'NODE_ENV': JSON.stringify(NODE_ENV)
+      'NODE_ENV': JSON.stringify(NODE_ENV),
+      'APPLICATION_BASE_URL': JSON.stringify(APPLICATION_BASE_URL)
     }
   })
 ];

webpack/constants.js

@@ -4,7 +4,7 @@
  */
 export const {
   NODE_ENV, DEV_SERVER_PORT, DEV_SERVER_HOSTNAME, WEBPACK_OUTPUT_PATH,
-  ASSET_HOST, ASSET_PATH, ANALYZE
+  ASSET_HOST, ASSET_PATH, ANALYZE, APPLICATION_BASE_URL
 } = process.env;
 
 // The URL of the dev server including the hostname and port