diff --git a/README.md b/README.md
index 7378e5a..39440c4 100644
--- a/README.md
+++ b/README.md
@@ -19,10 +19,7 @@ npm install
cd server && npm install
cd ..
-# Run the server
-npm run server
-
-# New terminal window
+# Run app
npm start
```
@@ -95,13 +92,13 @@ function receiveLogout() {
// Calls the API to get a token and
// dispatches actions along the way
export function loginUser(creds) {
-
+
let config = {
method: 'POST',
headers: { 'Content-Type':'application/x-www-form-urlencoded' },
body: `username=${creds.username}&password=${creds.password}`
}
-
+
return dispatch => {
// We dispatch requestLogin to kickoff the call to the API
dispatch(requestLogin(creds))
@@ -119,7 +116,7 @@ export function loginUser(creds) {
else {
// If login was successful, set the token in local storage
localStorage.setItem('id_token', user.id_token)
-
+
// Dispatch the success action
dispatch(receiveLogin(user))
}
@@ -145,10 +142,10 @@ We also have actions for retreiving the quotes that uses an API middleware.
const BASE_URL = 'http://localhost:3001/api/'
function callApi(endpoint, authenticated) {
-
+
let token = localStorage.getItem('id_token') || null
let config = {}
-
+
if(authenticated) {
if(token) {
config = {
@@ -158,7 +155,7 @@ function callApi(endpoint, authenticated) {
throw "No token saved!"
}
}
-
+
return fetch(BASE_URL + endpoint, config)
.then(response =>
response.text()
@@ -167,7 +164,7 @@ function callApi(endpoint, authenticated) {
if (!response.ok) {
return Promise.reject(text)
}
-
+
return text
}).catch(err => console.log(err))
}
@@ -175,18 +172,18 @@ function callApi(endpoint, authenticated) {
export const CALL_API = Symbol('Call API')
export default store => next => action => {
-
+
const callAPI = action[CALL_API]
-
+
// So the middleware doesn't get applied to every single action
if (typeof callAPI === 'undefined') {
return next(action)
}
-
+
let { endpoint, types, authenticated } = callAPI
-
+
const [ requestType, successType, errorType ] = types
-
+
// Passing the authenticated boolean back in our data will let us distinguish between normal and secret quotes
return callApi(endpoint, authenticated).then(
response =>
@@ -216,7 +213,7 @@ export function fetchQuote() {
}
}
-// Same API middlware is used to get a
+// Same API middlware is used to get a
// secret quote, but we set authenticated
// to true so that the auth header is sent
export function fetchSecretQuote() {
@@ -236,7 +233,7 @@ The reducers return new objects with the data carried by the actions.
// reducers.js
import { combineReducers } from 'redux'
-import {
+import {
LOGIN_REQUEST, LOGIN_SUCCESS, LOGIN_FAILURE, LOGOUT_SUCCESS,
QUOTE_REQUEST, QUOTE_SUCCESS, QUOTE_FAILURE
} from './actions'
diff --git a/index.js b/index.js
index ae7b23a..79cb115 100644
--- a/index.js
+++ b/index.js
@@ -7,16 +7,29 @@ import quotesApp from './reducers'
import thunkMiddleware from 'redux-thunk'
import api from './middleware/api'
+
+import { createDevTools } from 'redux-devtools'
+import LogMonitor from 'redux-devtools-log-monitor'
+import DockMonitor from 'redux-devtools-dock-monitor'
+
+const DevTools = createDevTools(
+
+
+
+)
+
let createStoreWithMiddleware = applyMiddleware(thunkMiddleware, api)(createStore)
-let store = createStoreWithMiddleware(quotesApp)
+let store = createStoreWithMiddleware(quotesApp, DevTools.instrument())
let rootElement = document.getElementById('root')
render(
-
+
,
rootElement
)
-
diff --git a/package.json b/package.json
index 776e3f2..e51f4e5 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,8 @@
"main": "index.js",
"scripts": {
"server": "node server/server.js",
- "start": "node server.js"
+ "client": "node server.js",
+ "start": "concurrently --kill-others \"npm run server\" \"npm run client\""
},
"author": "Auth0",
"license": "MIT",
@@ -19,7 +20,11 @@
"babel-core": "^5.6.18",
"babel-loader": "^5.1.4",
"babel-plugin-react-transform": "^1.1.0",
+ "concurrently": "^2.0.0",
"express": "^4.13.3",
+ "redux-devtools": "^3.1.1",
+ "redux-devtools-dock-monitor": "^1.1.0",
+ "redux-devtools-log-monitor": "^1.0.5",
"webpack": "^1.9.11",
"webpack-dev-middleware": "^1.2.0",
"webpack-hot-middleware": "^2.2.0"