Redux Feature Flags

React/Redux Feature Flags

Installation

npm install --save redux-feature-flags

Usage

FeatureFlags

First you have to initialize FeatureFlags enhancer and use it in your store

Example:

import { createStore } from 'redux';
import { FeatureFlags } from 'redux-feature-flags'

const features = {
  feature1: true,         
  feature2: false
}

const enhancer = FeatureFlags(features)

const reducer = (state, action) => { /* ... */ }
const initialState = { /* ... */ }

const store = createStore(reducer, initialState, enhancer)

You can also compose this with other redux middlewares

import { applyMiddleware, createStore, compose } from 'redux'
import thunk from 'redux-thunk'
import { FeatureFlags } from 'redux-feature-flags'

const features = {
  feature1: true,         
  feature2: false
}

const enhancer = FeatureFlags(features)

const reducer = (state, action) => { /* ... */ }
const initialState = { /* ... */ }

const store = createStore(reducer, initialState,
  compose(
    applyMiddleware(thunk),
    enhancer
  )
)

combinationAdapter

Using combineReducers will strip any extraneous keys from your state. FeatureFlags adds a key and reducer to your application state via the enhancer.

To use combineReducers with FeatureFlags you can use the combinationAdapter.

import { applyMiddleware, createStore, compose } from 'redux'
import thunk from 'redux-thunk'
import { combinationAdapter, FeatureFlags } from 'redux-feature-flags'

const features = {
  feature1: true,         
  feature2: false
}

const enhancer = FeatureFlags(features)

const createStoreWithMiddleware = compose(
    applyMiddleware(thunk),
    enhancer
  )(createStore)

const store = createStoreWithMiddleware(combinationAdapter({
    ...reducers
  }))

withFeatures

withFeatures is a higher-order component which can take an argument of mapFeaturesToProps. This can be used to create your own conditionals.

Example:

import { withFeatures } from 'redux-feature-flags'

class MyComponent extends React {
  // ...

  render() {
    const { myProps, toggles } = this.props

    // ...
  }
}

function mapFeaturesToProps(features, ownProps) {
  return {
    myProps: features.feature1 && ownProps.prop1
  }
}

export default withFeatures(mapFeaturesToProps)(MyComponent)

Remember that mapFeaturesToProps is an optional argument - the whole features object will also be injected to your component props.

Development

npm install - install dependencies
npm run lint - run eslint task
npm run build - create lib dir by running babel command