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. 😅