A library to provide you with tooling and knowledge about building your React Redux Architecture around code-splitting.
React Observatory can be used to it's full potential in projects that employ [email protected], redux, redux-observable and react-loadable or any other way for code-splitting.
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
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)
- 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.
MIT
Icon made by Freepik from www.flaticon.com