indoqa-react-app

Indoqa React Application

A component that provides a ready-to-use setup of Redux, react-router, redux-observable and Fela.

Motivation

Working on different react applications, we ended up writing the same initialization code again and again. To avoid this duplicity, we extracted this component that covers middleware configuration, routing, Fela and dev tool setup. Only app specific routes, reducers, epics and a Fela configuration need to be passed as props.

Features

• Redux Middleware
  • react-observable
• Redux Dev Tools
  • redux-devtools-extension
  • redux-logger
  • Hot Reloading
• React Router
• Fela setup

Usage

<IndoqaApplication store={store} routerConfig={{routes}} fela={fela} />

store

import {createIndoqaStore} from 'indoqa-react-app'

const createStore = () => {
  const indoqaStore = createIndoqaStore({
    rootReducer: require('./rootReducer.js').default,
    rootEpic: require('./rootEpic.js').default,
    initialState: {},
    enableLogging: process.env.NODE_ENV !== 'production',
  })

  if (module.hot) {
    module.hot.accept('./rootReducer', () => {
      const nextRootReducer = require('./rootReducer.js').default
      indoqaStore.reduxStore.replaceReducer(nextRootReducer)
    })

    if (indoqaStore.epicMiddleware) {
      module.hot.accept('./rootEpic', () => {
        const nextRootEpic = require('./rootEpic.js').default
        indoqaStore.epicMiddleware.replaceEpic(nextRootEpic)
      })
    }
  }

  return indoqaStore.reduxStore
}

export default createStore()

• The indoqaStore is a wrapper around a Redux store, the rxjs-observable epic middleware and the react-router-redux middleware.
• After a file change of the rootEpic/rootReducers or of any referenced file is detected, the root epic and root reducer are reloaded.
• By default the react-router-redux middleware is applied using the browserHistory of react-router. This can be overridden with the property 'history'. In this case make sure that the routerConfig of the IndoqaApplication uses the same history implementation (see 'routerConfig' below).

routerConfig

const routerConfig = {
  routes: myRoutes, // a single (optionally nested Route) or an array of Routes
  history: browserHistory|hashHistory // optional, defaults to browserHistory
}

combineReducersWithRouter

If react-router-redux should be used, its routing reducers has to be added to the applications reducers:

import {combineReducersWithRouter} from 'indoqa-react-app'

const reducers = {
 ...
}

export default combineReducersWithRouter(reducers)

Fela

Provide a Indoqa-Fela configuration.

Example

See indoqa-react-redux