A ready-to-use React/Redux archetype and demo application
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
src
.eslintrc
.flowconfig
.gitignore
.sublimelinterrc
README.md
indoqa-webpack-docs.js
indoqa-webpack-options.js
package.json
yarn.lock

README.md

Indoqa React/Redux Archetype

This project is a ready-to-use setup for React/Redux web applications we use at Indoqa. It is based on the Redux todos example and inspired by a lot of good ideas from the este dev stack. The main focus is to create a consistent environment for client side web applications that are consuming business logic using REST services over HTTP.

Features

We invent nothing new, this archetype is just a composition of useful libraries, frameworks, tools and plugins. In addition to vanilla React and Redux, we set up the following:

  • indoqa-react-app for a basic redux and router setup:
  • Ramda for immutable state transformation
  • Reselect to access Redux state
  • Flow for static typing of Javascript
  • Jest as test framework
  • indoqa-webpack build system
  • three demo pages:
    • one with an example of fetching data from an external webservice (geonames timezone),
    • two showing a local todo list based on Dan Abramov excellent introduction into Redux and
    • three demonstrating more advances usages of redux-observable (cancellation, debouncing).
  • a simple and clean application layout separating application setup, features and common components and following the atomic design methodology by Brad Frost.
    src
    ├── main
    │   ├── index.js                        // entry point to the Javascript application
    │   ├── app
    │   │   ├── App.react.js                // Theming, HTML header
    │   │   ├── fela.js                     // Fela renderer configuration
    │   │   ├── rootEpic.js                 // collect all epics and combine them into a root epic
    │   │   ├── rootReducer.js              // collect all reducers and combine them into a root reducer
    │   │   ├── routes.react.js             // link components to routes (URL paths)
    │   │   ├── selectors.js                // collect all selectors
    │   │   ├── store.js                    // Redux store setup with hot reloading support
    │   │   └── theme.js                    // application theme
    │   ├── commons
    │   │   ├── components
    │   │   │   ├── atoms                   // basic building blocks (e.g. boxes, links, etc.)
    │   │   │   ├── molecules               // composition of atoms
    │   │   │   ├── organisms               // compositions of molecules and atoms
    │   │   │   └── templates               // compositions of organisms, molecules and atoms
    │   │   ├── store                       // reusable epics, reducers and actions
    │   │   └── types                       // Flow types available for all features
    │   ├── feature1
    │   │   ├── components
    │   │   │   ├── FeaturePage.react.js    // based on a template available via an URL
    │   │   │   └── SomeComponent.react.js  // feature-specific molecule or organism
    │   │   ├── store
    │   │   │   ├── feature1.actions.js     // action types
    │   │   │   ├── feature1.epics.js       // side effects using rxjs observables
    │   │   │   ├── feature1.reducer.js     // Redux reducers
    │   │   │   └── feature1.selectors.js   // Reselect selectors to access state
    │   │   └── types                       // Flow types
    │   ├── feature2
    │   └── ...
    └── test                                // Jest tests
        └── feature1
            ├── actions
            ├── components
            └── reducers
    

Prerequisites

Installation

git clone https://github.com/Indoqa/indoqa-react-redux.git
cd indoqa-react-redux
yarn install

Usage

  • yarn start Run the app inside the dev node server including hot reloading
  • yarn test Run the tests
  • yarn package Create a minified distribution

Todos