redux-toolbelt-saga
A set of helper functions that extends 'redux-toolbelt' for usage with redux-saga.
TOC
Article
Read about redux-toolbelt here
Installation
The tools are available in the redux-toolbelt-saga npm package.
npm install --save redux-toolbelt redux-toolbelt-saga redux-saga
# or
yarn add redux-toolbelt redux-toolbelt-saga redux-sagaUsage
You may import the functions you'd like to use using one of the two methods:
import {makeAsyncActionCreator} from 'redux-toolbelt'
import {makeAsyncSaga} from 'redux-toolbelt-saga'
// or
import makeAsyncActionCreator from 'redux-toolbelt/lib/makeAsyncActionCreator'
import makeAsyncSaga from 'redux-toolbelt-saga/lib/makeAsyncSaga'API Reference
makeAsyncSaga()
Creates a saga that handles actions created using makeAsyncActionCreator.
The first argument specifies the saga to dispatch when the function in the second argument is dispatched.
const fetchTodos = makeAsyncActionCreator('FETCH_TODOS')
// Returns promise
const fetchTodosFromServer = ({id, url}, debug = false) => {/*...*/}
const saga = makeAsyncSaga(fetchTodos, fetchTodosFromServer)
//...
dispatch(fetchTodos({id: 100, url: 'http://google.com'}))By default, the payload of the action is what was passed to the function as it's argument.
You have two ways of changing it, using options:
const options = {
// pass specific arguments
args: [{id, url}],
// OR
// map the action to arguments using a regular or a generator function
mapArgs: function* mapArgs(action){
const {todosId} = action.payload
const url = yield select(urlSelector)
return [{id: todosId, url}, true]
}
}
const saga = makeAsyncSaga(fetchTodos, fetchTodosFromServer, options)