Refactored the code, now react and redux are running.

package.json

@@ -10,6 +10,7 @@
     "react-router": "3.0.2",
     "react-router-redux": "4.0.8",
     "redux": "3.6.0",
+    "redux-saga": "0.14.3",
     "reselect": "2.5.4"
   },
   "devDependencies": {

src/App.js

@@ -1,21 +1,22 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React, { Component } from 'react'
+import logo from './logo.svg'
+import './App.css'
 
 class App extends Component {
-  render() {
+  render () {
     return (
-      <div className="App">
-        <div className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
+      <div className='App'>
+        <div className='App-header'>
+          <img src={logo} className='App-logo' alt='logo' />
           <h2>Welcome to React</h2>
         </div>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
+        <p className='App-intro'>
+          To get going, edit <code>src/App.js</code> and save to reload.
         </p>
+        {this.props.children}
       </div>
-    );
+    )
   }
 }
 
-export default App;
+export default App

src/index.js

@@ -1,9 +1,49 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-import './index.css';
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { browserHistory, Router, Route, IndexRedirect } from 'react-router'
+import { createStore, combineReducers } from 'redux'
+import { Provider } from 'react-redux'
+import { syncHistoryWithStore, routerReducer } from 'react-router-redux'
 
+import App from './App'
+import project from './project'
+import './index.css'
+
+console.log(project)
+
+/**
+ * Redux Section
+ **/
+const rootReducer = combineReducers({
+  projects: project.reducer,
+  routing: routerReducer
+})
+
+const defaultState = {
+  projects: project.state
+}
+
+const store = createStore(rootReducer, defaultState)
+const history = syncHistoryWithStore(browserHistory, store)
+
+/**
+ * React-Router Section
+ **/
+const router = (
+  <Provider store={store}>
+    <Router history={history}>
+      <Route path='/' component={App}>
+        <IndexRedirect to='project' />
+        <Route path='project' component={project.components.EditProject} />
+      </Route>
+    </Router>
+  </Provider>
+)
+
+/**
+ * Render the app
+ **/
 ReactDOM.render(
-  <App />,
+  router,
   document.getElementById('root')
-);
+)

src/project/components/AddProjectForm.js

@@ -1,7 +1,7 @@
-import { Component } from 'react'
+import React from 'react'
 
-class AddProjectForm extends Component {
-  render() {
+class AddProjectForm extends React.Component {
+  render () {
     return (
       <form>
         <input type='text' ref='{input => this.projectName}' placeholder='Project Name' />
@@ -11,3 +11,4 @@ class AddProjectForm extends Component {
   }
 }
 
+export default AddProjectForm

src/project/components/CreateProject.js

@@ -0,0 +1,14 @@
+import React from 'react'
+
+class CreateProjectForm extends React.Component {
+  render () {
+    return (
+      <form>
+        <input type='text' ref='{input => this.projectName}' placeholder='Project Name' />
+        <text type='text' ref='{input => this.projectDesc}' placeholder='Project Description' />
+      </form>
+    )
+  }
+}
+
+export default CreateProjectForm

src/project/components/EditProject.js

@@ -0,0 +1,17 @@
+import React from 'react'
+
+class EditProjectForm extends React.Component {
+  render () {
+    return (
+      <form>
+        <input type='text' ref='{input => this.projectName}' placeholder='Project ID' />
+        <input type='text' ref='{input => this.projectName}' placeholder='Project Name' />
+        <textarea ref='{input => this.projectDesc}' placeholder='Project Description' />
+        <input type='text' ref='{input => this.projectName}' placeholder='Project Manager' />
+        <button type='submit'>Save</button>
+      </form>
+    )
+  }
+}
+
+export default EditProjectForm

src/project/components/ShowProject.js

@@ -0,0 +1,14 @@
+import React from 'react'
+
+class ShowProject extends React.Component {
+  render () {
+    return (
+      <form>
+        <input type='text' ref='{input => this.projectName}' placeholder='Project Name' />
+        <text type='text' ref='{input => this.projectDesc}' placeholder='Project Description' />
+      </form>
+    )
+  }
+}
+
+export default ShowProject

src/project/components/index.js

@@ -0,0 +1,6 @@
+import AddProjectForm from './AddProjectForm'
+import EditProject from './EditProject'
+import CreateProject from './CreateProject'
+import ShowProject from './ShowProject'
+
+export default { AddProjectForm, EditProject, CreateProject, ShowProject }

src/project/index.js

@@ -8,10 +8,10 @@
 
 import * as constants from './constants'
 import { actions, reducer } from './state'
-import * as components from './components'
-import { createSelector } from 'reselect'
-import { NAME } from './constants'
-import _ from 'lodash'
+import components from './components'
+// import { createSelector } from 'reselect'
+// import { NAME } from './constants'
+// import _ from 'lodash'
 
 const filters = {
   all: projects => projects.filter(p => projects.active)
@@ -19,10 +19,10 @@ const filters = {
 
 const selectors = {
   getAll: state => state[constants.NAME],
-  getActive: () => return [],
+  getActive: () => []
 }
 
-/*export const getAll = state => state[NAME]
+/* export const getAll = state => state[NAME]
 export const getActive = _.compose(filterActive, getAll)
 export const getCounts = createSelector(
     getAll,
@@ -31,6 +31,6 @@ export const getCounts = createSelector(
       all: allProjects.length,
       active: activeProjects.length
     })
-)*/
+) */
 
 export default { actions, constants, components, filters, selectors, reducer }

src/project/state.js

@@ -7,10 +7,10 @@
  **/
 
 import NAME from './constants'
-import { call, put, takeEvery } from 'redux-saga/effects'
+// import { call, put, takeEvery } from 'redux-saga/effects'
 
 /** actionTypes define what actions are handeled by the reducer. */
-const actionTypes = {
+export const actionTypes = {
   CREATE_REQ: `${NAME}/CREATE_REQ`,
   UPDATE_REQ: `${NAME}/UPDATE_REQ`,
   DELETE_REQ: `${NAME}/DELETE_REQ`
@@ -38,10 +38,13 @@ function remove (projectId) {
     projectId
   }
 }
-const actions = { create, update, remove }
+export const actions = { create, update, remove }
+
+/** state definition */
+export const state = []
 
 /** reducer is called by the redux dispatcher and handles all component actions */
-function reducer (state = {}, action) {
+export function reducer (state = {}, action) {
   switch (action.type) {
     case actionTypes.CREATE:
       return {
@@ -63,7 +66,7 @@ function reducer (state = {}, action) {
   }
 }
 
-/** sagas are asynchronous workers (JS generators) to handle the state. */
+/** sagas are asynchronous workers (JS generators) to handle the state.
 // Worker
 export function * incrementAsync () {
   try {
@@ -83,6 +86,5 @@ export function * watchIncrementAsync () {
 function * sagas () {
   yield takeEvery('INCREMENT_REQUEST')
   yield takeEvery('DECREMENT_REQUEST')
-}
-
-export default { actionTypes, actions, reducer, sagas }
+} */
+export const sagas = null