Real World Ramda: Configuring Your Redux Store

configureStore.js

// client/store/configureStore.js

import { createStore } from 'redux';
import { compose, when, equals } from 'ramda';
import enhancer from 'client/store/enhancers';
import rootReducer from 'client/reducers';

function configureStore(initialState) {
	const store = createStore(rootReducer, initialState, enhancer);
	const addStoreToObj = obj => (obj.store = store);
	const addStateToObj = obj => (obj.state = store.getState());

	// compose our window utilities from above
	const attachHelpersToWindow = compose(
		addStoreToObj,
		addStateToObj
	)(window);

	// attach state and our store to window in development
	when(
		equals(__DEVELOPMENT__, true),
		attachHelpersToWindow
	);

	return store;
}

export default configureStore;

dev.js

// client/store/enhancers/dev.js

import { applyMiddleware } from 'redux';
import { persistState } from 'redux-devtools';
import { browserHistory } from 'react-router';
import { routerMiddleware } from 'react-router-redux';
import thunkMiddleware from 'redux-thunk';
import { apiMiddleware } from 'redux-api-middleware';
import composeEnhancers, { defaultExtensionOptions } from 'client/store/devtools';

const composer = composeEnhancers(defaultExtensionOptions);

export default composer(
	applyMiddleware(
		apiMiddleware,
		thunkMiddleware,
		routerMiddleware(browserHistory)
	)
);

devtools.js

// client/store/devtools.js

import { curry, is, ifElse, allPass, isNil, not, identity } from 'ramda';
import { compose } from 'redux';
import { Iterable } from 'immutable';

const windowExists = is(Object, window);
const extensionCompose = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__;
const extensionComposeExists = not(isNil(extensionCompose));
const isImmutable = curry(Iterable.isIterable);
const serializeImmutable = value => value.toJS();
const defaultExtensionOptions = {
	serialize: {
		replacer: (key, value) => ifElse(
			isImmutable,
			serializeImmutable,
			identity
		)(value)
	}
};

const composeEnhancers = curry((options = defaultExtensionOptions) => {
	return ifElse(
		allPass(windowExists, extensionComposeExists),
		extensionCompose(options),
		compose
	);
});

export { composeEnhancers as default, defaultExtensionOptions };

enhancers.js

// client/store/enhancers.js

let enhancer;

if (__DEVELOPMENT__) {
	enhancer = require('./enhancers/dev').default;
} else if (__PRODUCTION__) {
	enhancer = require('./enhancers/prod').default;
}

export default enhancer;

index.js

// client/store/index.js

import configureStore from 'store/configureStore';

export default configureStore({});

prod.js

// client/store/enhancers/prod.js

import { applyMiddleware } from 'redux';
import { merge } from 'ramda';
import { browserHistory } from 'react-router';
import { routerMiddleware } from 'react-router-redux';
import thunkMiddleware from 'redux-thunk';
import { apiMiddleware } from 'redux-api-middleware';
import composeEnhancers, { defaultExtensionOptions } from 'client/store/devtools';

const extensionOptions = merge(defaultExtensionOptions, {
	features: {
		pause: true,
		lock: true,
		persist: true,
		export: true,
		jump: true,
		skip: true,
		reorder: true,
		dispatch: true,
		test: false
	}
});

const composer = composeEnhancers(extensionOptions);

export default composer(
	applyMiddleware(
		thunkMiddleware,
		apiMiddleware,
		routerMiddleware(browserHistory)
	)
);

readable-redux-stores-with-ramda.md

Real World Ramda: Readable Redux Stores