Saga-action-creator NPM

Saga action creator

The Saga-action-creator is made to simplify the writing of Redux-saga, it can auto-generate Action Creators for dispatch from your writes Saga effects directly.

This toolkit supports plugins and It can help to make some actions before and after effect convenient, which means it will be much simpler to set up the loading state, handle the error, etc. when you executing the asynchronous effect.

Adds automated loading indicators for effects to Saga-action-creator. Inspired by Rematch.

Why we still need this toolkit when we have rematch already? That is because the cost of migration from Redux's historical project to Rematch is high, and Redux-Saga has many excellent designs (i.e: such as take, fork, channel, etc.).

Features

Auto-generate actions from passed effect
Completely retain redux-saga features
Support plugins
Typescript-typings support (including plugins)
Testable

Getting started

Install

$ npm install --save saga-action-creator

$ yarn add saga-action-creator

Usage Example

Step 1: Define saga effects

import createSagaActions from 'saga-action-creator';
import { takeLatest, call } from 'redux-saga/effects';
import { getUserInfo, updateUser } from '../services/user';

const user = createSagaActions({
  // By default, you can pass the generator functions
  *getUserById(id: string): Generator<any, any, any> {
    yield call(getUserInfo, id);
  },
  // If you need to change the effect take type
  // you can pass the object for the action name
  updateUser: {
    takeType: takeLatest,
    *effect(id: string, name: string): Generator<any, any, any> {
      yield call(updateUser, id, { name });
    },
  },
});

export default user;

Step 2: Connect sagaActions

import { createConnection, getLoadingPlugin } from 'saga-action-creator';
import user from './user';
import { takeLatest } from 'redux-saga/effects';

const creator = createConnection({
  // Combine creators
  creators: {
    user,
  },
  // You can change the default take type here,
  // by default is `takeEvery`
  defaultTakeType: takeLatest,
  // You can pass plugins at there
  plugins: {
    // the plugin name will be map to reducer key
    loading: getLoadingPlugin(),
  },
});

export default creator;

For a more advanced setup, see plugins and Redux-saga

Step 3: Connect to redux and redux-saga

import { createStore, combineReducers, applyMiddleware } from 'redux';
import { all } from 'redux-saga/effects';
import createSagaMiddleware from 'redux-saga';
import creator from '../sagas';

// connect to store
const reducers = combineReducers({
  ...creator.getReducers(),
});

const sagaMiddleware = createSagaMiddleware();

// connect to saga and run
sagaMiddleware.run(function*() {
  yield all(creator.getEffects());
});

const store = createStore(reducers, applyMiddleware(sagaMiddleware));

export type AppState = ReturnType<typeof reducers>;

export default store;

Step 3: Use created actions

import { connect } from 'react-redux';
import { AppState } from '../store';
import userActions from '../sagaActions/user';
import UserList from './UserList';

const mapStateToProps = (state: AppState) => ({
  loading: state.loading.user.getUserById,
});

const mapDispatchToProps = {
  getUserById: userActions.actions.getUserById,
};

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(UserList);