Sugarbush-Saga

Project Source Code

Sugarbush is a performance enhancer for your react-redux application by replacing the Redux combinedReducers with switchback. Switchback will only run the corresponding reducer that matches the dispatched action type. Please read more about npm sugarbush

Sugarbush-Saga includes saga helper that works with the Sugarbush switchback, confingureAdaptiveStrore, and sbPut (saga effect)

Installation

Minimum Requirements: React: 16.8

npm install sugarbush-saga

yarn add sugarbush-saga

Saga

When dispatching Saga actions, the combinedReducers will process all the reducers. With dispatch from configureAdaptiveStore or adaptiveSagaDispatch this will not occur. Both functions take two parameters. The first parameter, dispatch, of type Redux Dispatch, the second parameter, key, of type string. The key assigned to either method must be unique and is used to bypass Sugarbush's switchback. This unique key must also be assigned to Sugarbush's switchback.

dispatchSaga

import { adpStore } from '../components/App'

export const sagaDispatch = () => adpStore.dispatch('@@GAGA-BYPASS!')

Note: The dispatch is a method of the Sugarbush configureAdaptiveStore. To set up a configureAdaptiveStore please read about sugarbush

adaptiveSagaDispatch

import { store } from '../components/App/store'
import { adaptiveSagaDispatch } from 'sugarbush'

export const sagaAdpDispatch = () => adaptiveSagaDispatch({dispatch: store.dispatch, key: '@@GAGA-BYPASS!', versobe: false })

Note: verbose is optional and is true by default but will be set to false in a production environment.

switchback

The unique saga key assigned to either the dispatchSaga or adaptiveSagaDispatch must also be assigned to switchback. This key will prevent switchback from processing any reducers when a saga action is dispatched.

const reducers = switchback({
    SystemState,
    CounterState,
    StatusState,
  }, {sagaBypass: '@@GAGA-BYPASS!'}
)

Note: To set up switchback please read sugarbush

sbPut

Use the sbPut side effect to run the corresponding reducer with switchback. The sbPut wraps the Saga Put effect and adds the reducer’s key to the effect. The sbPut is first initialized with a key representing the reducer listed in switchback. The sbPut reference takes two parameters. The first is an action type, type string, and payload of any.

import { takeEvery } from 'redux-saga/effects'
import { sbPut } from 'sugarbush'
import { SystemActionEnum } from '../actions/system-actions'

/** Using the sugarbush-saga effect of sbPut to set the key*/
const _put = sbPut('SystemState')

export function* watchFetchSystemSettings() {
  yield takeEvery(SystemActionEnum.FETCH_SYSTEM_THEME, fetchSetSystemTheme)
}

function* fetchSetSystemTheme() {
  /** Using the sugarbush-saga effect of sbPut */
  yield _put(SystemActionEnum.SET_SYSTEM_THEME, 'GREEN')
}

Internally the sbPut creates an action type with a key and calls the Saga Put side effect.

const _action:IAction = ({type: type, payload: payload, key: key})
yield put(_action)

Examples:

• switchback-example-saga
• switchback-example-classic
• switchback-example-toolkit

License

MIT