How to use redux-recompose - 4 common examples

import Immutable from 'seamless-immutable';
import { createReducer } from 'redux-recompose';

import { actions } from './actions';

const defaultState = {
  count: 0
};

// No handling of reducer.hearthstone.cards
const reducerDescription = {
  [actions.OTHER_ACTION]: state => state.merge({ count: state.count + 1 })
};

export default createReducer(Immutable(defaultState), reducerDescription);

import { createTypes } from 'redux-recompose';

export const actions = createTypes(['OTHER_ACTION'], '@@HEARTHSTONE');

// No API calls ?
const actionCreators = {
  otherAction: () => ({ type: actions.OTHER_ACTION })
};

export default actionCreators;

import { createStore, applyMiddleware, compose, combineReducers as CR } from 'redux';
import { fetchMiddleware, configureMergeState, wrapCombineReducers } from 'redux-recompose';
import thunk from 'redux-thunk';

import hearthstone from './hearthstone/reducer';

// Breaking in r-r v2.0: need to specify how do we merge (removed coupled seamless-immutable)
configureMergeState((state, diff) => state.merge(diff));

// Use this function to let invisible reducer override behavior when needed
const combineReducers = wrapCombineReducers(CR);

const reducers = combineReducers({
  hearthstone
});

const middlewares = [thunk, fetchMiddleware];
const enhancers = [
  applyMiddleware(...middlewares),
  // Cosmic sarasa for debug
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
];

const store = createStore(reducers, compose(...enhancers));

export default store;

// Declare your api calls
const getCards = async () => new Promise(resolve => setTimeout(() => resolve(responseBody), 1000));

// Declare your customizations, used by fetchMiddleware
getCards.successSelector = response => response.cards;
getCards.injections = [
  withPostSuccess((dispatch, response, state) => alert(`Fetched at: ${state.hearthstone.count}`))
];

const service = {
  getCards
};

// Export your service by also specifying the reducer name and the target for each action.
export default wrapService(service, 'hearthstone', { getCards: 'cards' });