1.0.7 • Published 5 years ago
redux-saga-connect v1.0.7
redux-saga-connect is a decorator react components to connect the sagas runtime.
Example
export default withSaga({mainSaga})(Component);
Getting started
Install
$ npm install --save redux-saga-connect
or
$ yarn add redux-saga-connect
Configuration
When you create a redux store function sagaMiddleware.run must be saved to the store object named runSaga
// create store
// ...
import createSagaMiddleware from 'redux-saga'
// ...
const sagaMiddleware = createSagaMiddleware()
// ...
store.runSaga = sagaMiddleware.run; // name `runSaga` required
// ...
Decorator using React.Context gets access to the runSaga function In the component constructor (to launch saga as quickly as possible), sagas is started using the runSaga function. In componentWillUnmount will cancel running sagas
Example
// with es6
import React from 'react';
import withSaga from 'redux-saga-connect'
// React component
const Component = () => (<div>Component</div>);
// Saga
function* mainSaga(){};
// Return enhancered component
export default withSaga({mainSaga})(Component);
// with recompose
export default compose(withSaga({mainSaga}))(Component)
// with typescript
import React from 'react';
import withSaga from 'redux-saga-connect'
// React component
interface ComponentProps {}
const Component: React.FC<ComponentProps> = () => <div>Component</div>;
// Saga
function* mainSaga() {}
// Return enhancered compoenent
export default withSaga<ComponentProps>({ mainSaga })(Component);
// with recompose
export default compose<ComponentProps, ComponentProps>(withSaga({ mainSaga }))(
Component,
);
Parameters
withSaga is a decorator with parameters
withSaga(objectOfSagas) objectOfSagas { key:string: Saga or Object }
Example parameters
import withSaga from 'redux-saga-connect';
const Component = () => (<div/>);
function* firstSaga(){};
function* secondSaga(){};
export default withSaga({ firstSaga })(Component);
// or
export default withSaga({
firstSaga,
secondSaga,
})(Component);
// or
export default withSaga({
nameFirstSaga: firstSaga,
nameSecondSaga: secondSaga,
})(Component);
// or
export default withSaga({
nameFirstSaga: firstSaga,
nameSecondSaga: {
saga: secondSaga,
hold: true, // saga will not delete in componentWillUnmount
force: true, // saga will get a unique name in will start
},
})(Component);