Redux Sink

Redux Sink is a decorator based using of Redux, uses class as boundary of each redux state, no actions, no reducers, introduce state and effect decorator instead, natively support redux state and reducers to be loaded by code split. for easier life of using state management

Getting started

npm i redux-sink

Step 1: create store

create store use SinkFactory.createStore, then use react-redux or other library to connect the store with Provider.

import { SinkFactory } from 'redux-sink';
const store = SinkFactory.createStore();

// for react
import { Provider } from 'react-redux';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
)

Step 2: create sink

redux state and effects managed by sink class, configured by decorators. to update the state, just simply assign the new state to it

import { sink, state, effect } from 'redux-sink'

@sink('counter')
class CounterSink {
  @state count = 0;
  @state total = 0;
  
  @effect
  update(value) {
    this.total += value;
    this.count++;
  }
}

Step 3: sinking

use sinking instead of connect, to connect sinks to component, only state and effect can be used in components

import { sinking } from 'redux-sink';
import { CounterSink } from './CounterSink';

@sinking(CounterSink)
class Counter extends React.Component {
  render() {
    const counter = this.props.counter;
    return (
      <div>
        <p>Current Total: <strong>{counter.total}</strong></p>
        <p>Current Count: <strong>{counter.count}</strong></p>
        <button onClick={() => counter.update(1)}>Increment</button>
        <button onClick={() => counter.update(-1)}>Decrement</button>
        <button onClick={() => counter.count++}>Count</button>
      </div>
    )
  }
}

{% hint style="info" %} Use state or effect to update sink value in component like example above. both behave the same as redux dispatch when use in component {% endhint %}

use sinking with out decorator

import { sinking } from 'redux-sink';

export const Component = sinking(CounterSink)(ComponentClass);

use sink by hooks, require react-redux: ^7.1.0

import { useSink } from 'redux-sink';
import { CounterSink } from './CounterSink';

const Component = () => {
  const counter = useSink(CounterSink);
  return (
    <div>
      <p>Current Count: <strong>{counter.count}</strong></p>
      <button onClick={() => counter.count++}>Increment</button>
      <button onClick={() => counter.count--}>Decrement</button>
    </div>
  )
}

LICENSE

MIT

JianXinZuo / redux-sink