A Small Personal Boilerplate: Simple React + Router + Redux for RR4

README.md

Simple React + Router + Redux for RR4

A Small Personal Boilerplate

Sample code within based on Redux Docs

Files / Structure

The two sample components and the initial-state object used herein are only inlined for brevity. CSS is not used/included in this boilerplate.

[./package.json]

[./src/index.js] (boilerplate)

[./src/store/actions.js] (boilerplate)
[./src/store/reducers.js] (boilerplate)
[./src/store/initial-state.js] (inlined)

[./src/assets/css/index.css]

[./src/components/Home.js] (inlined)
[./src/components/About.js] (inlined)

[package.json]

"dependencies": {
  "react": "^15.5.4",
  "react-dom": "^15.5.4"
},
"devDependencies": {
  "prop-types": "^15.5.8",
  "react-addons-css-transition-group": "^15.5.2",
  "react-redux": "^5.0.4",
  "react-router": "^4.1.1",
  "react-router-dom": "^4.1.1",
  "react-router-redux": "^4.0.8",
  "react-scripts": "0.9.5",
  "redux": "^3.6.0"
},

actions.js

/*
 * action types
 */

export const ADD_TODO = 'ADD_TODO'
export const TOGGLE_TODO = 'TOGGLE_TODO'
export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER'

/*
 * other constants
 */

export const VisibilityFilters = {
  SHOW_ALL: 'SHOW_ALL',
  SHOW_COMPLETED: 'SHOW_COMPLETED',
  SHOW_ACTIVE: 'SHOW_ACTIVE'
}

/*
 * action creators
 */

export function addTodo(text) {
  return { type: ADD_TODO, text }
}

export function toggleTodo(index) {
  return { type: TOGGLE_TODO, index }
}

export function setVisibilityFilter(filter) {
  return { type: SET_VISIBILITY_FILTER, filter }
}

index.js

import React from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'

// // // // // // // // // //
// [reducers.js]
//
import reducers from './reducers'

import { Provider } from 'react-redux'
import { Router, Route } from 'react-router'
import createBrowserHistory from 'history/createBrowserHistory'
const customHistory = createBrowserHistory()

// // // // // // // // // //
// import './assets/css/index.css'
//

// // // // // // // // // //
// [initial-state.js]
//
// export const initialState = {
const initialState = {
  todos: [
    {
      "completed": true,
      "text": "Commit code to Gist"
    },
    {
      "completed": false,
      "text": "Start next project"
    }
  ]
}
let store = createStore(reducers, initialState)

// The { Link } `import` here is only for this base code
// to work and can be removed when setting up a project.
// Links are imported into components that require them.
import { Link } from 'react-router-dom'

// // // // // // // // // //
// [Home.js]
//
// import { Link } from 'react-router-dom'
// export default class Home extends React.Component {
class Home extends React.Component {
  render() {
    return (
      <div>
        <p>Welcome Home</p>
        <p>State is output to console log.</p>
        <p>Feel free to jump over to: <Link to="/about">About</Link></p>
        {console.log(store.getState())}
      </div>
    )
  }
}

// // // // // // // // // //
// [About.js]
//
// import { Link } from 'react-router-dom'
// export default class About extends React.Component {
class About extends React.Component {
  render() {
    return (
      <div>
        <p>Welcome to About</p>
        <p>State is output to console log.</p>
        <p>Now go <Link to="/">Home</Link></p>
        {console.log(store.getState())}
      </div>
    )
  }
}

const App = ({ store }) => (
  <Provider store={store}>
    <Router history={customHistory}>
      <div>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  </Provider>
)

render(
    <App store={store} />,
    root
)

reducers.js

import { combineReducers } from 'redux'
import { ADD_TODO, TOGGLE_TODO, SET_VISIBILITY_FILTER, VisibilityFilters } from './actions'
const { SHOW_ALL } = VisibilityFilters

function visibilityFilter(state = SHOW_ALL, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return action.filter
    default:
      return state
  }
}

function todos(state = [], action) {
  switch (action.type) {
    case ADD_TODO:
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ]
    case TOGGLE_TODO:
      return state.map((todo, index) => {
        if (index === action.index) {
          return Object.assign({}, todo, {
            completed: !todo.completed
          })
        }
        return todo
      })
    default:
      return state
  }
}

const rootReducer = combineReducers({
  visibilityFilter,
  todos
})

export default rootReducer