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
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; // for reactimport Provider from 'react-redux'; ReactDOM
Step 2: create a sink
redux state and effects managed bysink
class, configured by decorators. to update the state, just simply assign the new state to it
@ @state count = 0; @state total = 0; @effect { thistotal += value; thiscount++; }
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'; @Component { const counter = thispropscounter; return <div> <p>Current Total: <strong>countertotal</strong></p> <p>Current Count: <strong>countercount</strong></p> <button =>Increment</button> <button =>Decrement</button> <button =>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'; const Component = 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 = ; return <div> <p>Current Count: <strong>countercount</strong></p> <button =>Increment</button> <button =>Decrement</button> </div>