actions.js

import { createAction } from 'redux-actions'

// Just an example of how you could use the `onEnter loadData`
export const setAvailabilities = createAction('SET_AVAILABILITIES')
export async function getAvailabilities (date, duration) {
  // make api request to load the data
  let availabilities = await bookingAPI.get({ date, duration }) // you can use the `fetch` package for this
  // then call the action below to set the requested data into the state (which is in the reducers)
  return setAvailabilities(availabilities)
}

export const setUser = createAction('SET_USER')

createStore.js

import logger   from 'redux-logger'
import promises from 'redux-promise'
import reducers from '#app/reducers'

import { browserHistory } from 'react-router'
import { routerMiddleware } from 'react-router-redux'
import { applyMiddleware, createStore } from 'redux'


let middleware = []
middleware.push(promises)
if (global.window) {
  middleware.push(routerMiddleware(browserHistory))
  middleware.push(logger())
}

export default function (state) {
  return createStore(reducers, state, applyMiddleware(...middleware))
}

Form.js

import React, { Component } from 'react'
import { connect } from 'react-redux'

import { getData, signup } from './actions'


@connect(state => ({
  user: state.user // <- this is an example of how you grab the global state in your components
}), dispatch => ({
  signup: (username, password) => dispatch(signup(username, password)) // <- you can either do it LIKE THIS
}))
export default class Form extends Component {
  
  loadData (props, redirect, callback) {
    getData()
  }
  
  state = {
    username: null,
    password: null
  }
  
  handleChange (changes) {
    this.setState({ ...changes })
  }

  submit () {
    const { username, password } = this.state
    this.props.signup(username, password)
    /**
    this.props.dispatch(signup(username, password))   // <- OR LIKE THIS
    */
  }
  
  render () {
    <form>
      <input type='text' placeholder='Username...' onChange={() => this.handleChange} />
      <input type='text' placeholder='Password...' onChange={() => this.handleChange} />
      <button onClick={() => this.submit}>Submit</button>
    </form>
  }
}

index.js

// Set default promise to bluebird for better error handling
require('babel-runtime/core-js/promise').default = global.Promise = require('bluebird')

import '#styles'

import React       from 'react'
import routes      from '#app/routes'
import createStore from '#app/createStore'

import { Router, browserHistory } from 'react-router'
import { Provider }               from 'react-redux'
import { render }                 from 'react-dom'
import { initialState }           from '#app/reducers'
import { syncHistoryWithStore }   from 'react-router-redux'

export { default as renderToString } from '#app/renderToString'

if (global.window) {
  // Attaching polyfill
  // https://github.com/bfred-it/object-fit-images
  let objectFitImages = require('object-fit-images')
  objectFitImages()

  let state = {}
  Object.assign(state, initialState, window.__app_state)
  console.log('STATE: ', state, 'INITIAL STATE: ', initialState, 'window.__app_state: ', window.__app_state)
  let store = createStore(state) 
  global.store = store
  let history = syncHistoryWithStore(browserHistory, store)

  render(
    <Provider store={store}>
      <Router routes={routes} history={history} />
    </Provider>,
    document.getElementById('main')
  )
}

reducers.js

import { handleActions } from 'redux-actions'
import * as actions from './actions'

const merge = (...args) => Object.assign({}, ...args)

export default handleActions({
  [actions.setUser]: (state, action) => merge(state, action.payload),


  // below are examples we used
  [userActions.setAvailabilities]: (state, { payload: availabilities }) => merge(state, {
    availabilities
  }),
  /* Don't do it this way. Bugs will occur if you modify the state directly instead of making
   * a copy. */
  // [userActions.setAvailabilities]: (state, { payload: availabilities }) => {
  //   state.availabilities = availabilities
  //   return state
  // },

  [userActions.setUserError]: (state, { payload: error }) => merge(state, {
    error
  }),

  [userActions.setEmails]: (state, { payload: emails }) => merge(state, {
    emails
  })
}, /* THIS IS THE STATE OF YOUR ENTIRE APPLICATION */ {
  user: null,
  
  availabilities: []
})

routes.js

import React                           from 'react'
import { Route, Redirect, IndexRoute } from 'react-router'

import Application     from '#comp/Application'
import Form            from './Form'
import TableRoutes     from '#comp/Table/routes'
import NotFound        from '#comp/ErrorPages/NotFound'


function setCookies () {
  console.log('setting cookies')
  document.cookie = 'turn_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJwcm9maWxlSWQiOiJiYTVlNDg5MS03YjhlLTQ1MDctYTJkNS1iNzgyMTEyYTYyNGEiLCJoYW5kbGUiOm51bGx9.hyVBWIRjAcd167pGuFY2fpyP_CY7cYxejPlb4ncqpuM;path=/'
  window.history.back()
}

export default [
  <Route path='/app' onEnter={setCookies} />,
    <Route path='form' component={Application}>
      <IndexRoute component={Form} onEnter={Form.loadData} />
      <Route path='whatever-route/:id' component={WhateverComponentToGoTo} onEnter={WhateverComponentToGoTo.loadData} />
      <Redirect from='app/*' to='form' /> */}
    </Route>

    <Redirect from='*' to='/dashboard/tables' />
  </Route>
]