Redux App Template

index.html

<div id="root"></div>

Redux App Template.markdown

Redux App Template

A Pen by subpopular on CodePen.

License.

script.js

const { Map, List, fromJS } = Immutable;
const { Component } = React
const { createStore, combineReducers } = Redux;

/**
 *
 * REDUCERS
 *
 */
const sayHello = (state, action) => {  
  return state;
}

const app = (state = {}, action) => {
  if (!Map.isMap(state) && !List.isList(state))
    state = Immutable.fromJS(state);
  
  const handlers = {
    SAY_HELLO: sayHello
  };

  return handlers[action.type] ?
    handlers[action.type](state, action) :
    state;
}

/**
 *
 * COMPONENTS
 *
 */
class App extends Component {
  render() {
    return <div>Hello App!</div>
  }
}

/**
 *
 * INIT APP
 *
 */
const reducer = combineReducers({ app })
const store = createStore(reducer)

const render = () => {
  ReactDOM.render(<App store={store}/>, document.getElementById('root'))
}

render()
store.subscribe(render)

scripts

<script src="http://codepen.io/chriscoyier/pen/yIgqi.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.6/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.0.6/react-redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.7.6/immutable.min.js"></script>

style.css

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  font-size: 16px;
  line-height: 24px;
  background: #EEE;
  minHeight: 100vh;
  display: flex;
}

styles

<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />