Using split for react + redux + redux-saga project

[manasanavada]

Hello,

Is it possible to use splitio for a react + redux project that has redux-saga middleware? If it is possible, I'm looking for an example of how to initialize the sdk and using it the component. Any help on this matter would be appreciated. Thanks.

[EmilianoSanchez]

Yes!
Currently the Split redux-client does not provide first-class support for redux-saga.
But you can use it 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 } from '@splitsoftware/splitio-redux'

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

/** Dispatch `INIT_SPLIT_SDK` action to init Split SDK */
store.dispatch(initSplitSdk({
  config: sdkConfig,
  onReady: () => {
    store.dispatch(getTreatments({ splitNames: ['some_feature'] }));
  }
}));

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 example using Split redux-client. In the branch we tried a workaround to use the SDK with redux-saga but not thunk, by implementing some sagas around the SDK action creators.