React Observatory

A library to provide you with tooling and knowledge about building your React Redux Architecture around code-splitting.

Prerequisites

React Observatory can be used to it's full potential in projects that employ react-router@4.x, redux, redux-observable and react-loadable or any other way for code-splitting.

Installation

To install the stable version:

npm install --save react-observatory

The Gist

Here's an example of Container Component that loads a reducer, epic and dispatches an action, when user navigates to the page with that component.

import { compose } from 'redux'
import { connect } from 'react-redux'
import { injectReducer, injectEpic, withRouterAction } from 'react-observatory'
import reducer from './reducers'
import Blog from './Blog'
import epic from './epics'
 
function mapStateToProps(state) {
  return {
    blog: state.blog,
  };
}
 
const mapDispatchToProps = { up: () => ({ type: 'Up100' }) }
 
const withConnect = connect(mapStateToProps, mapDispatchToProps)
 
const withReducer = injectReducer({ key: 'blog', reducer })
 
const withEpic = injectEpic(epic)
 
export default compose(
  withReducer,
  withEpic,
  withRouterAction('RouterActions.Blog'),
  withConnect
)(Blog)

Thanks

• redux for enabling better architectures.
• react-boilerplate for a good idea on how to inject reducers and sagas dynamically;
• react-observable for enabling declarative side-effects in Redux architecture;
• react-loadable for beautiful code-splitting on component level.

License

MIT