Putting It All Together

Now that we've built out all the necessary parts of our data flow, we can put them together to create our App. This is the simplest bit for anyone that has used Redux before as we use all of the standard redux api's to create the application.

Open src/index.js and replace it with;

import React from 'react';
import { render } from 'react-dom';
import { createStore, combineReducers, compose, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import userReducer from './reducers/user';
import { createMiddleware, gambitReducer } from 'gambit';
import api from './Api.js';
import HomeContainer from './HomeContainer';

const gambitMiddleware = createMiddleware(api);
const store = createStore(
  combineReducers({ user: userReducer, gambit: gambitReducer }),
  {},
  compose(
    applyMiddleware(gambitMiddleware),
  ),
);

function App() {
  return (
    <Provider store={store}>
      <HomeContainer />
    </Provider>
  );
}

render(<App />, document.getElementById('gambit-example'));

I won't go into detail on what all of this does as it's largely plain Redux and the Redux Guide goes into it in great detail.

Regarding the gambit specific parts though:

  combineReducers({ user: userReducer, gambit: gambitReducer }),

As mentioned before, the gambitReducer is required to make ActionBlockers work. It keeps track of what action's have been called successfully.

const gambitMiddleware = createMiddleware(api);
...
  compose(
    applyMiddleware(gambitMiddleware),
  ),
...

The gambit middleware is used to allow api calls to take place from ActionCreators. Whatever you pass in as the first argument to createMiddleware is passed back to you in createStagedActions api callback.