Redux Saga Injector (Demo)
A lightweight library for dynamic connections saga The library provides service for quick and easy connection/disconnection of sagas anytime and anywhere in your code
The Demo
presents the basic features redux-saga-injector
- connect new sagas and connect the component with the sagas
npm install redux-saga-injector
or
yarn add redux-saga-injector
Connect injectorSaga
from redux-saga-injector
// store.js
import createSagaMiddleware from 'redux-saga'
...
// create the saga middleware
const sagaMiddleware = createSagaMiddleware()
// mount it on the Store
const store = createStore(
reducer,
applyMiddleware(sagaMiddleware)
)
// then run the saga
sagaMiddleware.run(mySaga)
Store with injectorSaga
from redux-saga-injector
// store.js
import {injectorSaga} from 'redux-saga-injector'
import createSagaMiddleware from 'redux-saga'
...
// create the saga middleware
const sagaMiddleware = createSagaMiddleware()
// mount it on the Store
const store = createStore(
reducer,
applyMiddleware(sagaMiddleware)
)
// then run the saga
sagaMiddleware.run(injectorSaga);
sagaMiddleware.run(mySaga);
After that you can use injectSagas
anywhere in the application. Also available removeSaga
- functions to remove saga
Quick connect sagas
import {injectSagas} from 'redux-saga-injector'
function* mySaga(){
// ... any code
}
injectSagas({ mySaga })
connect sagas with options
import {injectSagas} from 'redux-saga-injector'
function* mySaga(sagaProps){
// sagaProps from options
// ... any code
}
injectSagas({
mySaga: {
saga: mySaga,
options: {
hold: false, // cant cancel saga
replace: true, // replace prev saga
force: false, // force append saga
sagaProps: {}, // saga arguments
},
}
})
import {removeSaga} from 'redux-saga-injector'
const sagaName = `mySagaName`
removeSaga(sagaName)
redux-saga-injector
provides a decorator for a component to communicate sagas with life cycle of a component
For the work of the decorator, you must perform the previous step - to connect sagaMiddleware
from redux-saga-injector
When component trigger the event componentWillMount
will connect the list of sagas for a given component (anySaga,anySaga2)
When component trigger the event componentWillUnmount
sagas will be automatically deleted
At the start of the saga it will be passed the component props
import React from 'react'
import PropTypes from 'prop-types'
import {injectorHOC} from 'redux-saga-injector'
// simple component
const MyComponent = (props) => {
return (
<div>MyComponent</div>
)
}
MyComponent.propTypes = {}
MyComponent.defaultProps = {}
// any sagas
function* anySaga(props){
// props - props of component merge with `options.sagaProps`
// ... any code
}
function* anySaga2(props){
// props - props of component merge with `options.sagaProps`
// ... any code
}
export default injectorHOC(MyComponent,{anySaga,anySaga2});
Using decorator you can pass the startup settings of the sagas
export default injectorHOC(MyComponent,{
anySaga:{
saga: anySaga,
options: {
hold: false, // cant cancel saga
replace: true, // replace prev saga
force: false, // force append saga
sagaProps: {}, // saga arguments
},
}
});
To run the demo page locally, it is imperative that the local machine was create-react-app
git clone https://github.com/isychev/redux-saga-injector.git
cd redux-saga-injector
yarn start