redux-saga-thunk

by diegohaz

Dispatching an action handled by redux-saga returns promise

209 Stars 19 Forks Last release: over 2 years ago (v0.7.1) MIT License 96 Commits 21 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

redux-saga-thunk

Generated with nod NPM version NPM downloads Build Status Coverage Status

Dispatching an action handled by redux-saga returns promise. It looks like redux-thunk, but with pure action creators.

class MyComponent extends React.Component {
  componentWillMount() {
    // `doSomething` dispatches an action which is handled by some saga
    this.props.doSomething().then((detail) => {
      console.log('Yaay!', detail)
    }).catch((error) => {
      console.log('Oops!', error)
    })
  }
}

redux-saga-thunk
uses Flux Standard Action to determine action's
payload
,
error
etc.



If you find this useful, please don't forget to star ⭐️ the repo, as this will help to promote the project.
Follow me on Twitter and GitHub to keep updated about this project and others.



Motivation

There are two reasons I created this library: Server Side Rendering and redux-form.

When using redux-saga on server, you will need to know when your actions have been finished so you can send the response to the client. There are several ways to handle that case, and

redux-saga-thunk
approach is the one I like most. See an example.

With redux-form, you need to return a promise from

dispatch
inside your submit handler so it will know when the submission is complete. See an example

Finally, that's a nice way to migrate your codebase from

redux-thunk
to
redux-saga
, since you will not need to change how you dispatch your actions, they will still return promises.

Install

$ npm install --save redux-saga-thunk

Basic setup

Add

middleware
to your redux configuration (before redux-saga middleware):
import { createStore, applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'
import { middleware as thunkMiddleware } from 'redux-saga-thunk'
^

const sagaMiddleware = createSagaMiddleware() const store = createStore({}, applyMiddleware(thunkMiddleware, sagaMiddleware))                                              ^

Usage

You just need to set

meta.thunk
to
true
on your request actions and put it on your response actions inside the saga:
const action = {
  type: 'RESOURCE_REQUEST',
  payload: { id: 'foo' },
  meta: {
    thunk: true
    ^
  }
}

// send the action store.dispatch(action).then((detail) => { // payload == detail console.log('Yaay!', detail) }).catch((e) => { // payload == e console.log('Oops!', e) })

function* saga() { while(true) {    const { payload, meta } = yield take('RESOURCE_REQUEST')                     ^   try {      const detail = yield call(callApi, payload) // payload == { id: 'foo' } yield put({        type: 'RESOURCE_SUCCESS', payload: detail, meta        ^      }) } catch (e) { yield put({ type: 'RESOURCE_FAILURE', payload: e, error: true,        ^        meta        ^ }) } } }

redux-saga-thunk
will automatically transform your request action and inject a
key
into it.

You can also use it inside sagas with

put.resolve
:

function *someSaga() {
  try {
    const detail = yield put.resolve(action)
    console.log('Yaay!', detail)
  } catch (error) {
    console.log('Oops!', error)
  }
}

Usage with selectors

To use

pending
,
rejected
,
fulfilled
and
done
selectors, you'll need to add the
thunkReducer
to your store:
import { combineReducers } from 'redux'
import { reducer as thunkReducer } from 'redux-saga-thunk'

const reducer = combineReducers({ thunk: thunkReducer, // your reducers... })

Now you can use selectors on your containers:

import { pending, rejected, fulfilled, done } from 'redux-saga-thunk'

const mapStateToProps = state => ({ loading: pending(state, 'RESOURCE_CREATE_REQUEST'), error: rejected(state, 'RESOURCE_CREATE_REQUEST'), success: fulfilled(state, 'RESOURCE_CREATE_REQUEST'), done: done(state, 'RESOURCE_CREATE_REQUEST'), })

API

Table of Contents

clean

Clean state

Parameters

Examples

const mapDispatchToProps = (dispatch, ownProps) => ({
  cleanFetchUserStateForAllIds: () => dispatch(clean('FETCH_USER')),
  cleanFetchUserStateForSpecifiedId: () => dispatch(clean('FETCH_USER', ownProps.id)),
  cleanFetchUsersState: () => dispatch(clean('FETCH_USERS')),
})

pending

Tells if an action is pending

Parameters

Examples

const mapStateToProps = state => ({
  fooIsPending: pending(state, 'FOO'),
  barForId42IsPending: pending(state, 'BAR', 42),
  barForAnyIdIsPending: pending(state, 'BAR'),
  fooOrBazIsPending: pending(state, ['FOO', 'BAZ']),
  fooOrBarForId42IsPending: pending(state, ['FOO', ['BAR', 42]]),
  anythingIsPending: pending(state)
})

Returns boolean

rejected

Tells if an action was rejected

Parameters

Examples

const mapStateToProps = state => ({
  fooWasRejected: rejected(state, 'FOO'),
  barForId42WasRejected: rejected(state, 'BAR', 42),
  barForAnyIdWasRejected: rejected(state, 'BAR'),
  fooOrBazWasRejected: rejected(state, ['FOO', 'BAZ']),
  fooOrBarForId42WasRejected: rejected(state, ['FOO', ['BAR', 42]]),
  anythingWasRejected: rejected(state)
})

Returns boolean

fulfilled

Tells if an action is fulfilled

Parameters

Examples

const mapStateToProps = state => ({
  fooIsFulfilled: fulfilled(state, 'FOO'),
  barForId42IsFulfilled: fulfilled(state, 'BAR', 42),
  barForAnyIdIsFulfilled: fulfilled(state, 'BAR'),
  fooOrBazIsFulfilled: fulfilled(state, ['FOO', 'BAZ']),
  fooOrBarForId42IsFulfilled: fulfilled(state, ['FOO', ['BAR', 42]]),
  anythingIsFulfilled: fulfilled(state)
})

Returns boolean

done

Tells if an action is done

Parameters

Examples

const mapStateToProps = state => ({
  fooIsDone: done(state, 'FOO'),
  barForId42IsDone: done(state, 'BAR', 42),
  barForAnyIdIsDone: done(state, 'BAR'),
  fooOrBazIsDone: done(state, ['FOO', 'BAZ']),
  fooOrBarForId42IsDone: done(state, ['FOO', ['BAR', 42]]),
  anythingIsDone: done(state)
})

Returns boolean

License

MIT © Diego Haz

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.