React / Redux (with Flow) Starter Kit

Table of Contents

1. Requirements
2. Installation
3. Running the Project
4. Project Structure
5. Live development
6. Async
7. Type Checking
8. Deployment

Requirements

• node ^5.0.0
• yarn ^0.23.0 or npm ^3.0.0

Installation

$ git clone https://github.com/marinsokol/react-redux-flow-starter-kit.git <my-project-name>
$ cd <my-project-name>

When that's done, install the project dependencies. It is recommended that you use Yarn for deterministic dependency management, but npm install will suffice.

$ yarn  # Install project dependencies (or `npm install`)

Running the Project

$ yarn start  # Start the development server (or `npm start`)

While developing, you will probably rely mostly on yarn start; however, there are additional scripts at your disposal:

yarn <script>	Description
start	Serves your app at localhost:3050
build	Builds the application to ./public/dist
test	Runs unit tests with Jest. See testing
lint	Lints the project for potential errors
lint:fix	Lints the project and fixes all correctable errors
flow	Runs Flow type checker. See Type Checking

Project Structure

.
├── public                 # Static public folder containing build application
│   ├── dist                 # Folder containing production build js for application
│   └── index.html           # Main HTML page container for app
├── server                 # Express application that provides webpack middleware
│   └── app.js               # Server application entry point
├── src                    # Application source code
│   ├── app.js               # Application bootstrap and rendering
│   ├── components           # Global Reusable Components
│   ├── constants          # Constants important for whole application
│   │   └── actionTypes.js   # Declaration for all action types in application  
│   ├── epics              # Async side effects in Redux 
│   │   └── index.js         # Combines all epics for application
│   ├── layouts            # Components that dictate major page structure
│   │   └── index.js         # Global application layout in which to render routes          
│   ├── reducers           # Reducer registry and injection
│   │   └── index.js              
│   ├── routes               # Main route definitions and async split points
│   │   ├── index.js         # Bootstrap main application routes with store
│   │   ├── Home             # Fractal route
│   │   │   ├── index.js     # Route container
│   │   │   ├── components   # Presentational React Components
│   │   └── Game             # Fractal route
│   │       ├── index.js     # Game route definition (injects custom reducer to store)
│   │       ├── actions      # Actions for game route
│   │       ├── components   # Presentational React Components
│   │       ├── container    # Connect components to actions and store
│   │       ├── reducers     # Reducer for game route
│   │       └── types        # Types for game route
│   ├── store             # Create and instrument redux store  
│   │   └── index.js           
│   └── types             # Custom type for Flow
└── tests                    # Unit tests

Live Development

Hot Reloading

Hot reloading is enabled by default when the application is running in development mode (yarn start). This feature is implemented with webpack's Hot Module Replacement capabilities, where code updates can be injected to the application while it's running, no full reload required.

Redux DevTools

We recommend using the Redux DevTools Chrome Extension. Using the chrome extension allows your monitors to run on a separate thread and affords better performance and functionality. It comes with several of the most popular monitors, is easy to configure, filters actions, and doesn't require installing any packages in your project.

However, it's easy to bundle these developer tools locally should you choose to do so. First, grab the packages from npm:

yarn add --dev redux-devtools redux-devtools-log-monitor redux-devtools-dock-monitor

Then follow the manual integration walkthrough.

Async

This project uses redux-observable for async actions and creating side effects. Redux-observable is using 'epics' for that actions. Epics are functiona which takes a stream of actions and returns a stream of actions. Actions in, actions out. Like this:

const actionEpic = (action$) => action$;

const pingEpic = action$ =>
  action$.filter(action => action.type === 'PING')
    .delay(1000) 
    .mapTo({ type: 'PONG' });

// later you dispatch only 'PING' action

Your reducers will receive the original PING action and PONG action after 1s.

Type Checking

This project uses Flow static type checker. Flow settings are defined in .flowconfig. By default, Flow ignores __test__, config, node_modules, public, server floders and checking ALL other .js files. If You are using VS Code, You can install vscode-flow-ide to get live type checking and errors. You can also type check by running:

$ yarn run flow

Deployment

Out of the box, this starter kit is deployable by serving the ./public folder generated by yarn build. This project does not concern itself with the details of server-side rendering or API structure. This makes it easy do deploy to service like Firebase Hosting