redux-saga-kit

redux-saga is a very sophisticated and awesome library, but it's not that easy to work with.

This package aims to help with the creation and development of sagas.

Getting started

Prerequisites:

• redux
• redux-saga

Install

npm install --save redux-saga-kit

What This Project Includes

At the moment, this project includes only two methods:

• sagaCreator - used for creating sagas
• stateSelector - A helper method to easily create saga selectors

sagaCreator

sagaCreator(definition)

definition: object

returns: Generator Function

The sagaCreator accepts a definitions object, and returns one saga that takes different (using takeEvery or takeLatest) actions, and forks their handlers.

How to use

import { sagaCreator } from 'redux-saga-kit';
  
const saga = sagaCreator({...definitionsObject});

The definition object should have this form:

{actionName: object|func}

This will define a handler for the action with the given actionName.
If a function is give, this will be the handler that will be called each time the action is dispatched.

Alternatively, a definition object can be passed. It looks like this:

{
    handler: func,
    takeLatest: bool,
    throttle: bool|number,
    noParams: bool
 }

handler (function)

default: no default - must be provided

The handler function to be called every time the action is dispatched.
By default, the handler should be a function, accepting saga params, and that returns a function (or generator function) which will actually handle the action.
The returned function receives {payload} as an argument.

Example:

const myHandler = ({Param1, Param2, ...}) => function* ({payload}) {
  // saga logic here
};

Saga params are used in order to easily test the sagas. You can see more here: redux-saga-tester.

If you choose to work without saga params, you can use the noParams (explained below), and then you can just pass the generator function itself, as so:

const myHandler = function* ({payload}) {
  // saga logic here
};  
  
// or  
  
function* anotherHandler ({payload}) {
  // saga logic here     
}

takeLatest (boolean)

default: false

If this is true, each action cancels previous unfinished handlers. Else, it will call the handler for each action, regardless if previous handlers have finished running.

For more information see: takeLatest

takeFirst (boolean)

default: false

When true, the handler will be called only once, and not at each action "fired".

throttle (boolean | number)

default: 100 (ms)

You can throttle the handlers for the actions by adding the throttle prop.
If throttle value is true then action will be throttled by 100ms.
Alternatively, you can pass a number as the ms value to be throttled by.

For more information see: throttle

cancelOn (string | array[string])

default: null

With this property you can pass an action type, or a list of action types, that when they are "fired", this saga will be cancelled, if it is currently running.

For more information see: cancel

noParams (boolean)

default: false

As described above, this option gives an option to pass a handler without saga params

stateSelector

stateSelector(pathToProp, [defaultValue])

pathToProp: string
defaultValue: any (optional)

returns: Any

How to use

import { stateSelector } from 'redux-saga-kit';
  
const myPropSelector = stateSelector('path.to[my].prop', 'someDefaultValue');

This is a pretty straight forward method.
It uses lodash's get method to get the property from the state.

The first argument is a string representing the path to the property, and the second argument is a default value, if the property is not found, or does not exist.

In addition, you may use additional arguments, that are sent to the select function, by referencing them using ${args[index]}, where index is the index of the argument in the function argument list - 1 (accounting for the selector function being the first argument).

For instance:

import { select } from 'redux-saga/effects';
import { stateSelector } from 'redux-saga-kit';
 
/*
    Assuming the state has the following structure:
    state = {
        arrayProp: [
            {fooProp: 'foo'}, 
            {fooProp: 'bar'}
        ]
    }
    the function below will log: bar   
*/
 
function* example() {
    const propIndex = 1;
    const myPropSelector = stateSelector('arrayProp[${args[0]}].fooProp', 'someDefaultValue');
    const value = yield select(myPropSelector, propIndex);
    console.log(value);
}