Giter Site home page Giter Site logo

react-observatory / react-observatory Goto Github PK

View Code? Open in Web Editor NEW
8.0 8.0 0.0 1.66 MB

πŸ”­ Component-centric code-splitting for reducers and epics

Home Page: https://react-observatory.js.org

JavaScript 100.00%
code-splitting higher-order-component react react-loadable redux redux-architecture redux-observable rxjs

react-observatory's Introduction

πŸ”­ React Observatory

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

Build Status

Prerequisites

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.

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

Logo

Icon made by Freepik from www.flaticon.com

react-observatory's People

Contributors

halfzebra avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

react-observatory's Issues

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this πŸ’ͺ.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.


No npm token specified.

An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.

Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/.


Good luck with your project ✨

Your semantic-release bot πŸ“¦πŸš€

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.