Have ideas to improve npm?Join in the discussion! »

    redux-ab-test

    6.6.5 • Public • Published

    Redux AB Test: UI optimization that works

    npm version Build Status Dependency Status npm downloads

    Support for testing multiple versions of your components with React and Redux.

    • Works great with React
    • Integrated with Redux
    • Supports multiple experiments and variations with a simple DSL
    • Respects precedence order when specifying audience and react-router criteria
    • Can be used for server rendering
    • Few dependencies, small (20k, 6k gzipped)

    Installation

    Redux AB Test is distributed via npm:

    npm install --save redux-ab-test
    

    API

    import React, { Component } from 'react';
     
    class App extends Component {
      render() {
        return (
          <Provider store={...}>
            <div>
              <h1> Welcome to my app! </h1>
              <h2> Checkout my amazing homepage! </h2>
     
              { /** Try out new versions of your homepage!  */ }
              <Experiment name="Cover Art Test">
     
                { /** Default homepage experience */ }
                <Variant name="Control" weight={50}>
                  <RegularHomepage />
                </Variant>
     
                { /** Guided Onboarding Wizard */ }
                <Variant name="Guided Flow" weight={25}>
                  <OnboarindHomepage />
                </Variant>
     
                { /** Modals for all of the things! */ }
                <Variant name="Modals Everywhere" weight={25}>
                  <HomePageWithModals />
                </Variant>
     
              </Experiment>
            </div>
          </Provider>
        );
      }
    }

    Server-side rendering

    redux-ab-test supports server-side rendering by default.

    React-Redux

    Experiments are stored in the redux store, which you can use to push play & win events to your analytics provider. Here's an example of a simle middleware that listens for those events and dispatches to window.trackEvent(<event name>, { <event data });

    import { createStore, applyMiddleware, compose } from 'redux';
    import { reactAbTest, reactAbTestInitialState, reduxAbTestMiddleware } from 'redux-ab-test';
    import { createAction, handleActions } from 'redux-actions';
    import { PLAY, WIN } = 'redux-ab-test';
     
    // Create a middleware that listens for plays & wins
    const pushToAnalytics = store => next => action => {
      const output = next(action);
      switch(action.type) {
        case PLAY: {
          const experiment = action.payload.get('experiment');
          const variation  = action.payload.get('variation');
          window.trackEvent('Experiment Played', { ... })
          break;
        }
        case WIN: {
          const experiment    = action.payload.get('experiment');
          const variation     = action.payload.get('variation');
          const actionType    = action.payload.get('actionType');
          const actionPayload = action.payload.get('actionPayload');
          window.trackEvent('Experiment Won', { ... })
          break;
        }
      }
      return output;
    };
     
    const middlewares = [ reduxAbTestMiddleware, pushToAnalytics /*, thunk, promise, ...*/ ];
    const finalCreateStore = compose(applyMiddleware.apply(this, middleware))(createStore);
    const reducers = { reactAbTest };
    export default finalCreateStore(reducers, {});
     

    Please ★ on GitHub!

    Table of Contents

    Installation

    redux-ab-test is compatible with React 0.15.x.

    npm install redux-ab-test

    Alternative Libraries

    Please let us know about alternate libraries not included here.

    Resources for A/B Testing with React

    Please let us know about React A/B testing resources not included here.

    API Reference

    <Experiment />

    Experiment container component. Children must be of type Variant.

    • Properties:
      • name - Name of the experiment.
        • Required
        • Type: string
        • Example: "My Example"
      • userIdentifier - Distinct user identifier. When defined, this value is hashed to choose a variant if defaultVariantName or a stored value is not present. Useful for server side rendering.
        • Optional
        • Type: string
        • Example: "7cf61a4521f24507936a8977e1eee2d4"
      • defaultVariantName - Name of the default variant. When defined, this value is used to choose a variant if a stored value is not present. This property may be useful for server side rendering but is otherwise not recommended.
        • Optional
        • Type: string
        • Example: "A"

    <Variant />

    Variant container component.

    • Properties:
      • name - Name of the variant.
        • Required
        • Type: string
        • Example: "A"

    Resources for A/B Testing with React

    Please let us know about React A/B testing resources not included here.

    Tests

    Mocha tests are performed on the latest version of Node.

    Please let me know if a different configuration should be included here.

    Running Tests

    Locally:

    npm install
    npm test

    Install

    npm i redux-ab-test

    DownloadsWeekly Downloads

    9

    Version

    6.6.5

    License

    MIT

    Last publish

    Collaborators

    • avatar