REGA - REdux + saGA

The default way of writing redux along with sagas includes too much of the boilerplate code making it very hard to maintain for large apps. rega is a combined wrapper for your redux app using sagas making it easy to work with & maintain for large apps. It is highly based upon the modular duck pattern.

Features

no switch statements or destructuring of states.
simple reducer function to update the state.
simple actions object to maintain all the actions of a reducer.
simple hook for saga to attach it directly to an action.
clean readable code with less files.

Usage

Lets take foo as a piece of state for which you want to write your reducer & saga.

store/foo/index.js

import { rega } from '@dhruwlalan/rega';

import { fetchFoo } from './sagas';

export const { FooReducer, FooSagas, FooActions, FooSelectors } = rega({
  name: 'foo',
  initialState: {
    foo: 0,
    isFetching: false,
    isFetchingDone: false,
    isFetchingError: false,
    fetchingError: null,
  },
  actions: {
    fetchFoo: {
      saga: fetchFoo,
      arguments: [],
      reducer: () => ({
        isFetching: true,
        isFetchingDone: false,
        isFetchingError: false,
        fetchingError: null,
      }),
    },
    fetchFooDone: {
      arguments: ['foo'],
      reducer: ({ foo }) => ({
        foo,
        isFetching: false,
        isFetchingDone: true,
        isFetchingError: false,
        fetchingError: null,
      }),
    },
    fetchFooError: {
      arguments: ['error'],
      reducer: ({ error }) => ({
        isFetching: false,
        isFetchingDone: true,
        isFetchingError: true,
        fetchingError: error,
      }),
    },
  },
});

store/foo/sagas.js

import { put } from 'redux-saga/effects';

import { FooActions } from './index';

export function* fetchFoo({ currentCount, actionType }) {
  try {
    const response = yield fetch('some_api_url');
    const data = yield response.text();
    yield put(FooActions.fetchFooDone({ foo: data }));
  } catch (error) {
    yield put(FooActions.updateCounterError({ error }));
  }
}

store/store.js

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

import { FooReducer, FooSagas } from './foo';

const sagaMiddleware = createSagaMiddleware();

const rootReducer = combineReducers({ foo: FooReducer });

const rootSaga = function* () {
  yield all([...FooSagas]);
};

export const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));

sagaMiddleware.run(rootSaga);

Example

a simple counter example app

Changelog

CHANGELOG.md

dhruwlalan / rega