Dugong

Minimal State Container for React Apps using RxJS

Dugong is a minimal single-store state container for React that uses RxJS. You can use it with Redux/Flux or any other pattern/framework although that is not nessecary.

Why Dugong?

I made Dugong because I wanted a more clear way to know what every component consumes from the global state. Passing attributes through the props in apps with deep hierarchies many times leads to confusion and decrease the developement speed. Imagine a scenario where you have to inspect the parent of the parent of the parent of a component to know why a property is passed to it and if its value is the same as the value that the parent have or if the parent has manipulate it. Ofcourse you can still pass props from the parents, it is just my opinion that you should avoid it. Also I wanted to be able to have a Store on which I can iterate using reactive programming methods.

How to pass the data from the Store to the Components

Create your Store with its initial state

import { createStore } from 'dugong';

const initialState =  {
  ui: { ... },
  businessLogic: { ... },
  hello: "hello world",
  ...
  ...
};

createStore( initialState );

Connect your component with the Store and define which parameters of the store you want to listen.

import { connect } from 'dugong';

@connect( 'hello' )
class MyHelloWorldComponent extends Component
{
  render(){
    return <div>{ this.state.hello }</div>;
  }
}

You can also get the Store and use rxjs methods on it.

import { getStore } from 'dugong';

class MyHelloWorldComponent extends Component
{
  componentWillMount()
  {
    getStore().map( ( { ui } ) => ui.something )
              .filter( something => something.length > 4 )
              .subscribe( something => this.setState( { something } ) );
  }
  render(){
    return <div>{ this.state.something }</div>;
  }
}

How to update the Store

Dugong is not opinionated on how to structure your application, you can use updateStore() directly inside the components.

import { updateStore } from 'dugong';

class MyComponent extends Component
{
  update( something )
  {
     updateStore( { something } );
  }
  render(){
    return <input onChange={ e => this.updateStore( e.target.value ) }</input>;
  }
}

You can create services that will update parts of the store and inject them inside your components

// UIService
import { updateStore } from 'dugong';

export const updateSomething = value => updateStore( { something : value } );


// MyComponent
import UIService from 'dugong';

class MyComponent extends Component
{
  update( value )
  {
     UIService.updateSomething( value );
  }
  render(){
    return <input onChange={ e => this.updateStore( e.target.value ) }</input>;
  }
}

...or you can even dispatch an action with Redux (or anything similar) and then use updateStore to change the global state of your application.

Contributing

Feel free to open issues, make suggestions or send PRs. This project adheres to the Contributor Covenant code of conduct. By participating, you are expected to uphold this code.

Contact

E-mail : [email protected]

Twitter: @avraamakis

License

MIT