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"