Demo)
Redux Saga Injector (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
Demo
The Demo
presents the basic features redux-saga-injector
- connect new sagas and connect the component with the sagas
Getting Started
Installing
npm install redux-saga-injector
or
yarn add redux-saga-injector
Usage
injectorSaga
from redux-saga-injector
Connect Connect injectorSaga
from redux-saga-injector
// store.js import createSagaMiddleware from 'redux-saga' ... // create the saga middleware const sagaMiddleware = // mount it on the Store const store = // then run the saga sagaMiddleware
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 = // mount it on the Store const store = // then run the saga sagaMiddleware; sagaMiddleware;
After that you can use injectSagas
anywhere in the application. Also available removeSaga
- functions to remove saga
injectSagas
and removeSaga
Connect sagas
Quick connect sagas
import injectSagas from 'redux-saga-injector' { // ... any code}
connect sagas with options
import injectSagas from 'redux-saga-injector' { // sagaProps from options // ... any code}
Remove sagas
import removeSaga from 'redux-saga-injector' const sagaName = `mySagaName`
injectorHOC
Decorator 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 componentconst MyComponent = props return <div>MyComponent</div> MyComponentpropTypes = MyComponentdefaultProps = // any sagas{ // props - props of component merge with `options.sagaProps` // ... any code}{ // props - props of component merge with `options.sagaProps` // ... any code} MyComponentanySagaanySaga2;
injectorHOC with options
Using decorator you can pass the startup settings of the sagas
MyComponent anySaga: saga: anySaga options: hold: false // cant cancel saga replace: true // replace prev saga force: false // force append saga sagaProps: // saga arguments ;
Start demo
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