Setup:

Requirements:

React
Redux
React-Redux redux-batched-actions two-way-rest

Proper Setup Example.

import { enableBatching } from 'redux-batched-actions';
import { createStore, combineReducers} from 'redux';
import {setAddress, setStore} from 'two-way-rest';
import rootReducer from './reducers/index';

//We setup the address for backend ajax queries
setAddress('http://remoteurl.com');

const store = createStore(
    enableBatching(combineReducers(rootReducer))
);
//We send two-way-rest an exact copy of the store
setStore(store);

ReactDOM.render(
  <Provider store={store}>
    <MyRootComponent />
  </Provider>,
  rootEl
)

Although the two-way-rest plugin does not need the combineReducers function from redux, it does require the same state reducer format:

fullState = {reducerName_1: reducerState_1, ...}

Once the initial setup is complete, we’re free to do a little more setup…

In order for these special forms to work, we need to create a parent component to hold them.

<DeclareReducer reducer=’reducerName’>
{this.props.children}
</DeclareReducer>

DeclareReducer is setting up a reducer context property that all of its form children will have access to. Our magical forms need to know which reducer to use. (Although it’s perfectly alright to just use one reducer, as we’ll be using another tool to separate reduction code)

The last step is to merge our Two-Way-Rest reducer with any reducers that are going to invoke the Two-Way-Rest architecture.

reducerName.js

const normalReducerSwitch  = function(state, action){...};
const twoWayRestSwitch = generateRestSwitch('reducerName');
export default combineSwitches([normalReducerSwitch, twoWayRestSwitch]);

We need to make certain the state is an immutable map object, so the twoWayRestSwitch should always be last. The immutable library is an integral component of two-way-rest.