indoqa-react-redux

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:
  • redux-observable for side-effects
  • react-router to support multiple pages and history management
  • Fela as our css-in-js library and theming
  • dev tools for logging and debugging
• Ramda for immutable state transformation
• Reselect to access Redux state
• Flow for static typing of Javascript
• Jest as test framework
• indoqa-webpack build system
  • babel to support es6 syntax ans language features
  • eslint using eslint-config-indoqa based on the well documented airbnb rules
  • hot reloading of React components, Fela themes, epics and reducers
• 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

• Watch the video about flux and react, then switch to the evolved redux and watch the videos as well.
• Learn about the new es6 features and take a deep look at arrow functions, destructuring, defaults/spread and modules.
• Flow Getting-Started and its usage with React and Redux
• The Fela Workshop projects helps you to get familiar with Fela
• Install nodejs including yarn.

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

• i18n
• react-router v4
• usage with Indoqa Boot in Java frontend-backend applications
• code-splitting by routes
• lighthouse check