Integration with existing Redux store

While for most cases redux-tiles should be sufficient for the whole redux store, it has some drawbacks (especially in complex asynchronous interaction), and maybe you would like to add it into existing project or you have to combine with another libraries, which provide their own reducers. It is not hard at all, and you just have to do couple more actions in order to achieve it.

Reducer

The first thing you'd have to do – combine reducers. Reducer, which you create from createEntities or createReducers, won't be at the top level – it will be one level down, so we have to specify the name under which it will be stored, so all selectors will work properly:

import { createEntities, createReducers } from 'redux-tiles';
import tiles from '../tiles';

const { reducer: reduxTilesReducer } = createEntities(tiles, 'redux_tiles');
// or
const reduxTilesReducer = createReducers(tiles);

Now all selectors will know, that they have to look one level deeper in order to find data. Let's combine this reducer with others:

import { combineReducers, createStore } from 'redux';

const finalReducer = combineReducers({
  ...otherReducers,
  redux_tiles: reduxTilesReducer,
});

And that's it, we got combined reducer which we can pass to the createStore function, along with the initial state and middleware:

import { createStore, applyMiddleware } from 'redux';
import { createMiddleware } from 'redux-tiles';
import tiles from '../tiles';

const { middleware } = createMiddleware(tiles);
const store = createStore(
  finalReducer,
  // to restore data on the client, usually something like
  // window.__INITIAL_STATE__
  initialState,
  applyMiddleware(middleware)
);

Actions and Selectors

For actions and selectors we don't really have to do anything – after we pass correct namespace to createReducers or createEntities, it will make selectors work correctly. Actions are not affected at all, we just have to integrate them into bigger actions and selectors objects:

import { createEntities } from 'redux-tiles';
import tiles from '../tiles';

const {
  actions: tilesActions,
  selectors: tilesSelectors,
  reducer: tilesReducer
} = createEntities(tiles, 'redux_tiles');

export const actions = {
  ...otherActions,
  tiles: tilesActions,
};

export const selectors = {
  ...otherSelectors,
  tiles: tilesSelectors,
};