redux-unfold-saga

A no headache middleware helper for redux-saga.

Getting started

Install

npm install --save redux-unfold-saga

or

yarn add redux-unfold-saga

Example repo

If you want a quick demo repo in real life.

• https://github.com/manhhailua/redux-unfold-saga-example

Usage example

• index.js

import React from 'react';
import { createAction } from 'redux-unfold-saga';

const queryPosts = createAction('QUERY_POSTS');

export default class PostList extends React.Component {
  state = {
    isLoading: false,
    posts: [],
  };

  componentDidMount() {
    this.dispatchQueryPosts();
  }

  dispatchQueryPosts = () => {
    this.props.dispatch(
      queryPosts(
        {
          type: 'HOT',
        },
        {
          onBeginning: () => {
            // Do something before the query
            this.setState({ isLoading: true });
          },
          onFailure: error => {
            // Do something in case of caught error
          },
          onSuccess: posts => {
            // Do something after the query succeeded
            this.setState({ posts });
          },
          onFinished: () => {
            // Do something after everything is done
            this.setState({ isLoading: false });
          },
        },
      ),
    );
  };

  render() {
    return (
      <View>
        {this.state.isLoading && <Text>Loading...</Text>}
        {this.state.posts.map(post => (
          <Text>{post.title}</Text>
        ))}
      </View>
    );
  }
}

• saga.js

import { unfoldSaga } from 'redux-unfold-saga';

function* takeQueryPosts({ payload }) {
  yield unfoldSaga({
    handler: async () => {
      const posts = await queryPosts(payload);
      return posts;
    },
    key: 'QUERY_POSTS',
  });
}

function* defaultSaga() {
  yield takeLatest('QUERY_POSTS', takeQueryPosts);
}

API

Table of Contents

• createActionTypeOnBeginning
  • Parameters
  • Examples
• createActionTypeOnFailure
  • Parameters
  • Examples
• createActionTypeOnFinish
  • Parameters
  • Examples
• createActionTypeOnSuccess
  • Parameters
  • Examples
• createAction
  • Parameters
  • Examples
• unfoldSaga
  • Parameters
  • Examples

createActionTypeOnBeginning

Create onBeginning action type

Parameters

• key string

Examples

createActionTypeOnSuccess('DO_SOMETHING') // 'DO_SOMETHING_BEGAN'

Returns string

createActionTypeOnFailure

Create onFailure action type

Parameters

• key string

Examples

createActionTypeOnSuccess('DO_SOMETHING') // 'DO_SOMETHING_FAILED'

Returns string

createActionTypeOnFinish

Create onFinish action type

Parameters

• key string

Examples

createActionTypeOnSuccess('DO_SOMETHING') // 'DO_SOMETHING_FINISHED'

Returns string

createActionTypeOnSuccess

Create onSuccess action type

Parameters

• key string

Examples

createActionTypeOnSuccess('DO_SOMETHING') // 'DO_SOMETHING_SUCCEEDED'

Returns string

createAction

Create an action for real life usage inside or even outside of a component

Parameters

• type string

Examples

Inside of a component

const queryPosts = createAction('QUERY_POSTS');

this.props.dispatch(
  queryPosts(
    {
      category: 'HOT',
    },
    {
      onBeginning: () => {
        // Do something before the query
        this.setState({ isLoading: true });
      }
      onFailure: (error) => {
        // Do something in case of caught error
      }
      onSuccess: (posts) => {
        // Do something after the query succeeded
      }
      onFinished: () => {
        // Do something after everything is done
        this.setState({ isLoading: false });
      }
    },
  ),
);

Outside of a react component

store.dispatch(
  queryPosts({
    type: 'HOT',
  }),
);

Inside another saga

const queryPosts = createAction('QUERY_POSTS');

function* takeQueryPosts() {
  yield put(queryPosts());
}

Returns UnfoldSagaActionType

unfoldSaga

Common saga helper that unifies handling side effects into only one standard form

Parameters

• body UnfoldSagaHandlerType
  • body.handler Function Main handler function. Its returned value will become onSuccess callback param
  • body.key string Action type
• callbacks UnfoldSagaCallbacksType (optional, default {})
  • callbacks.onBeginning Function This callback will be called after onBeginning action is dispatched.
  • callbacks.onFailure Function This callback will be called after onFailure action is dispatched. It will only be called in case of error.
  • callbacks.onFinish Function This callback will be called after onFinish action is dispatched.
  • callbacks.onSuccess Function This callback will be called after onSuccess action is dispatched. It will not be called in case of error.
• options UnfoldSagaOptionsType (optional, default {})
  • options.stateless boolean This ensures if redux actions will be triggered

Examples

function* takeQueryPosts({ payload: { category } }) {
  yield unfoldSaga({
    handler: async () => {
      const posts = await queryPosts({ category });
      return posts;
    },
    key: 'QUERY_POSTS',
  });
}

function* takeQueryCategories({ payload: { category } }) {
  yield unfoldSaga({
    *handler() => {
      const categories = yield call(queryPosts, { category });
      return categories;
    },
    key: 'QUERY_CATEGORIES',
  });
}

function* defaultSaga() {
  yield takeLatest('QUERY_POSTS', takeQueryPosts);
  yield takeLatest('QUERY_CATEGORIES, takeQueryCategories);
}

Returns Saga<void>

License

MIT © Manh Pham - manhpt.com