react-redux-ab

react-redux-ab

react-redux-ab is a simple A/B testing library that stores the active variants in a reducer for easy access accross the whole application. It is universal, as it can run on the client side, browser side or any kind of application where redux can run.

API docs

Compared to prior libraries (such as , it offers the following advantages:

• The availability in the store by default makes it possible to have one experiment with effects in several places in the application, even widely separated.
• Ability to A/B test not only visual elements but also anything that has access to the store. You can for instance A/B test async action creators for speed tests.
• Weighted variants out of the box. You can create an experiment with 4 variants but decide that one will be used by 60% of the traffic, one by 20% and the remaining two by 10% each.

Basic client side use case

• Create experiments and add them to the root reducer:

import { combineReducers } from 'redux'
import { createExperiments } from 'react-redux-ab'

const rootReducer = combineReducers({
	/* Your stuff here */
	experiments: createExperiment(sb{
		'buttons': {
			variants: [
				{name: 'blue'},
				{name: 'red', weight: 5}
			]
		},
		'callToAction': {
			variants: [
				{name: 'original'},
				{name: 'suggestion1'},
				{name: 'suggestion2'}
			]
		}
	})
})

• Load them from the cookies at laod time (use any cookie library you want, we love js-cookie but you can use any other function that returns a dictionnaries of all key/values in the cookies:

import { createStore } from 'redux'
import { digestCookies } from 'react-redux-ab'
import Cookies from 'js-cookie'
import rootReducer from './reducer'

const initalState = {
	experiments: digestCookies(Cookies.get())
}
const store = createStore(rootReducer, initialState)

• Connect the cookie updater to the store:

import { backeCookies } from 'react-redux-ab'
import Cookies from 'js-cookie'
store.subscribe(() => {
	bakeCookies(store.getState(), Cookies.set)
})

• Use experiments in your components:

import React from 'react'
import { Experiment, Variant } from 'react-redux-ab'

export default function MyApp (props) {
	return <Experiment name="callToAction">
			<Variant name="original">
				<button>Boring button</button>
			</Variant>
			<Variant name="suggestion2">
				<a href="#">Awesome link</a>
			</Variant>
		</Experiment>
}

Recipes

• Use react-redux-ab on the server side

Check out more details on parameters and possibilities in the API docs