https://github.com/isychev/redux-saga-injector

A lightweight library for dynamic connections saga
https://github.com/isychev/redux-saga-injector

injector js react redux redux-injection redux-saga redux-sagas saga-injector sagas

Last synced: 26 days ago
JSON representation

A lightweight library for dynamic connections saga

• Host: GitHub
• URL: https://github.com/isychev/redux-saga-injector
• Owner: isychev
• Created: 2017-12-05T14:29:41.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2017-12-08T15:25:53.000Z (almost 7 years ago)
• Last Synced: 2024-09-22T01:13:17.956Z (about 2 months ago)
• Topics: injector, js, react, redux, redux-injection, redux-saga, redux-sagas, saga-injector, sagas
• Language: JavaScript
• Size: 730 KB
• Stars: 9
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Redux Saga Injector ([Demo](https://isychev.github.io/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](https://isychev.github.io/redux-saga-injector/)

The [Demo](https://isychev.github.io/redux-saga-injector/) 

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

### Connect `injectorSaga` from `redux-saga-injector`

Connect `injectorSaga` from `redux-saga-injector`

```jsx

  // 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` 

```jsx

  // 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

### `injectSagas` and `removeSaga`

#### Connect sagas

Quick connect sagas

```jsx

import {injectSagas} from 'redux-saga-injector'

function* mySaga(){

    // ... any code

}

injectSagas({ mySaga })

```

connect sagas with options

```jsx

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

    },

  }

})

```

#### Remove sagas

```jsx

import {removeSaga} from 'redux-saga-injector'

const sagaName = `mySagaName`

removeSaga(sagaName)

```

### Decorator `injectorHOC`

`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`

```jsx

import React from 'react'

import PropTypes from 'prop-types'

import {injectorHOC} from 'redux-saga-injector'

// simple component

const MyComponent = (props) => {

  return (

    
MyComponent

  )

}


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});

```

### injectorHOC with options

Using decorator you can pass the startup settings of the sagas

```jsx

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

    },

  }

});

```

### Start demo

To run the demo page locally, it is imperative that the local machine was [create-react-app](https://github.com/facebookincubator/create-react-app)

```

git clone https://github.com/isychev/redux-saga-injector.git

cd redux-saga-injector

yarn start

```