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
npm i redux-sink
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
)
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++;
}
}
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>
)
}