Redux Sink - React

Redux Sink is a decorator based using of React-Redux, uses class as the 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 an easier life of using state management

• Getting started
  • Step 1: create a store
  • Step 2: create a sink
  • Step 3: sinking
• Examples
• API References
• ChangeLog

Getting started

npm i react-redux-sink

Step 1: create a store

create store use SinkFactory.createStore, then use react-redux or another 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 a sink

redux state and effects managed bysinkclass, 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 a 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 a component like an example above. both behave the same as redux dispatch when using in component {% endhint %}

use sinking without the decorator

import { sinking } from 'react-redux-sink';

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

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

import { useSink } from 'react-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