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
create store use SinkFactory.createStore
, then use react-redux
or another library to connect the store with Provider
.
Copy 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 bysink
class, configured by decorators. to update the state, just simply assign the new state to it
Copy 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
Copy 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 >
)
}
}
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
use sinking without the decorator
Copy import { sinking } from 'redux-sink' ;
export const Component = sinking (CounterSink)(ComponentClass);
use sink by hooks, require react-redux: ^7.1.0
Copy 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