splitio/redux-client

Example of initializing split SDK with redux-saga middleware

manasanavada opened this issue · 2 comments

Hello,

I'm looking for an example of how to initialize split sdk using redux saga middleware.
Any help would be appreciated

Thanks

Hello @manasanavada

Currently the Split-Redux SDK does not provide first-class support for redux-saga.
For the meantime, you can use it by configuring Redux with both middlewares: redux-thunk and redux-saga, as shown below:

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import createSagaMiddleware from 'redux-saga'
import { splitReducer, initSplitSdk, getTreatments, getSplitNames } from '@splitsoftware/splitio-redux'

/** Init Redux Store */
const sagaMiddleware = createSagaMiddleware()
const store = createStore(
  combineReducers({
    splitio: splitReducer,
    // other reducers
  }),
  applyMiddleware(thunk, sagaMiddleware)
);

/** Run your sagas */
sagaMiddleware.run(mySaga);

/** Dispatch `initSplitSdk` to init Split SDK */
store.dispatch(initSplitSdk({
  config: SDK_CONFIG, 
  onReady: () => {
    console.log('SDK initialized');

    /** Once the SDK is ready, we dispatch a `getTreatments` action with all Splits in our workspace */
    const splitNames = getSplitNames();
    store.dispatch(getTreatments({ splitNames }));
  }
}));

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Redux-thunk is a tiny library with a few lines of code. Thus, it doesn't have much impact on your app size.

You can also check this branch at our Redux SDK example, where we tested a workaround to use the SDK with redux-saga but not redux-thunk. Consider that this example requires that you pass the store dispatch method when running splitSaga.

It would be great if the redux-thunk dependency wasn't required. I was able to successfully integrate using the strategy described in this ticket, but including thunk just for split feels wrong. 😅