Typesafe React + Redux Example

Features

• Static analysis + type safety with Flow
• Full spectrum application testing via Enzyme
• Controlled effect system via Redux Ship
• Type-checked style variables via styled-components
• TODO Derived types of data schemata + API querying actions from API specifications

Main ideas

Redux, Deboilerplated

In its standard form, Redux requires inane amounts of boilerplate by encouraging manual splitting of "action creators", "actions", "action constants", and "reducers".

Instead, we define maps of parametrized state transitions (think reducer branches), and then combine them in such a way that derives all the necessary Redux machinery.

Controlled effects via Redux Ship

With vanilla Redux, we have two application-specific parameters:

• The definition of your state
• A set of synchronous state transitions, traditionally called "actions", hereon called commits

Redux-ship adds two more:

• A set of asynchronous effects, hereon called effects
• A set of asynchronous computations, which include execution of effects or issue commits to the state, hereon called async actions or simply actions

We use the same map encoding to reduce boilerplate for defining these effects and actions.

Type annotations where they count

Flow's strength lies in its type inference. This allows us to have static guarantees about our code without having to pollute our codebase with excessive type annotations.

We write types where they count, and allow the rest to be inferred. This means writing:

• types of the state, and any function that act on the state.
• types of async actions
• prop types

Libraries used:

Language

flow

• Flow is a type checker for JS.

flow-typed

• flow-typed is a repository of type definitions for 3rd party libraries.

eslint

• eslint is a JS linter.
• Our style is based on eslint-config-airbnb.

Babel

• Babel is a JS compiler.
• Among standard ES6 features + JSX, we also use
  • Class property initializers, which solve the problem of binding React class methods
  • Object rest spread

Build

Webpack

• Webpack is a highly configurable JS module bundler.
• It provides a hot-module replacement API, which we use in development mode without the use of react-hot-loader.

View

React

• React is a UI framework.

styled-components

• styled-components give us colocated, per-component styling via es6 tagged template literals
• We also get type-checked styling variables by virtue of writing styles in JS + Flow.

State Management

Redux

• Redux is a low-level API for building state management systems.

Effect System

Redux Ship

• Redux Ship is a controlled effect system for JS, which plays well with the redux ecosystem.
• It gives us testable, typesafe asynchronous computations.

Testing

mocha

• Mocha is a test runner.

mocha-loader

• mocha-loader is a webpack loader that compiles mocha tests suites.
• We use mocha-loader to run JS tests in CI.
• We also use mocha-loader to run JS tests locally in the browser, which includes a sleek, hot-reloading test reporter.
• It will hot-reload all tests which have changed or depend transitively on files that have changed.

enzyme

• Enzyme is a suite of React component testing utilities.
• We use it for unit, integration, and feature tests.