Introduction

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 versions:

npm install --save @react-observatory/inject-epic
npm install --save @react-observatory/inject-reducer
npm install --save @react-observatory/with-action
npm install --save @react-observatory/with-router-action

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 } from '@react-observatory/inject-reducer'
import { injectEpic } from '@react-observatory/inject-epic'
import { withRouterAction } from '@react-observatory/with-router-action'
import reducer from './reducers'
import Blog from './Blog'
import epic from './epics'

const mapStateToProps = ({ blog }) => ({ blog })
const mapDispatchToProps = { up: () => ({ type: 'Up100' }) }
const withConnect = connect(mapStateToProps, mapDispatchToProps)
const withReducer = injectReducer('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