Nothing's plumb meaningless
    Have ideas to improve npm?Join in the discussion! »

    redux-saga-thunk
    TypeScript icon, indicating that this package has built-in type declarations

    0.7.3 • Public • Published

    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

    Install

    npm i redux-saga-thunk

    DownloadsWeekly Downloads

    3,957

    Version

    0.7.3

    License

    MIT

    Unpacked Size

    31.5 kB

    Total Files

    11

    Last publish

    Collaborators

    • avatar