added redux files

Author: willrstern

4-redux/package.json

@@ -4,6 +4,7 @@
   "description": "",
   "main": "webpack.config.js",
   "dependencies": {
+    "axios": "^0.12.0",
     "babel-loader": "^6.2.0",
     "babel-plugin-add-module-exports": "^0.1.2",
     "babel-plugin-react-html-attrs": "^2.0.0",
@@ -15,6 +16,9 @@
     "react": "^0.14.6",
     "react-dom": "^0.14.6",
     "redux": "^3.5.2",
+    "redux-logger": "^2.6.1",
+    "redux-promise-middleware": "^3.2.0",
+    "redux-thunk": "^2.1.0",
     "webpack": "^1.12.9",
     "webpack-dev-server": "^1.14.1"
   },

4-redux/src/js/1-basic-setup.js

@@ -0,0 +1,23 @@
+import { createStore } from "redux";
+
+const reducer = (initialState=0, action) => {
+  if (action.type === "INC") {
+    return initialState + 1;
+  } else if (action.type === "DEC") {
+    return initialState - 1;
+  }
+  return initialState;
+}
+
+const store = createStore(reducer, 1)
+
+store.subscribe(() => {
+  console.log("store changed", store.getState());
+})
+
+store.dispatch({type: "INC"})
+store.dispatch({type: "INC"})
+store.dispatch({type: "INC"})
+store.dispatch({type: "DEC"})
+store.dispatch({type: "DEC"})
+store.dispatch({type: "DEC"})

4-redux/src/js/2-multiple-reducers.js

@@ -0,0 +1,47 @@
+import { combineReducers, createStore } from "redux";
+
+// I would live in a separate file
+const userReducer = (state={}, action) => {
+  switch(action.type) {
+    case "SET_NAME": {
+      return {...state, name: action.payload};
+      break;
+    }
+    case "SET_AGE": {
+      return {...state, age: action.payload};
+      break;
+    }
+  }
+  return state;
+}
+
+// I would live in a separate file
+const tweetsReducer = (state=[], action) => {
+  switch(action.type) {
+    case "ADD_TWEET": {
+      return state.concat({
+        id: Date.now(), //fake an ID by using a timestamp
+        text: action.payload,
+      });
+      break;
+    }
+  }
+  return state;
+}
+
+const reducers = combineReducers({
+  user: userReducer,
+  tweets: tweetsReducer
+})
+
+const store = createStore(reducers)
+
+store.subscribe(() => {
+  console.log("store changed", store.getState());
+})
+
+store.dispatch({type: "SET_NAME", payload: "Will"})
+store.dispatch({type: "SET_AGE", payload: 35})
+store.dispatch({type: "SET_AGE", payload: 34})
+store.dispatch({type: "ADD_TWEET", payload: "OMG LIKE LOL"})
+store.dispatch({type: "ADD_TWEET", payload: "I am so like seriously like totally like right now"})

4-redux/src/js/3-middleware.js

@@ -0,0 +1,45 @@
+import { applyMiddleware, createStore } from "redux";
+
+const reducer = (initialState=0, action) => {
+  if (action.type === "INC") {
+    return initialState + 1;
+  } else if (action.type === "DEC") {
+    return initialState - 1;
+  } else if (action.type === "MULT") {
+    throw new Error("AHHHH!!");
+  }
+  return initialState;
+}
+
+const logger = (store) => (next) => (action) => {
+  console.log("Logged", action);
+  return next(action);
+};
+
+
+const errorHandler = (store) => (next) => (action) => {
+  try {
+    return next(action);
+  } catch(e) {
+    console.log("ERROR!", e);
+  }
+};
+
+const middleware = applyMiddleware(
+  logger,
+  errorHandler
+)
+const store = createStore(reducer, middleware)
+
+store.subscribe(() => {
+  console.log("store changed", store.getState());
+})
+
+store.dispatch({type: "INC"})
+store.dispatch({type: "INC"})
+store.dispatch({type: "INC"})
+store.dispatch({type: "DEC"})
+store.dispatch({type: "DEC"})
+store.dispatch({type: "DEC"})
+store.dispatch({type: "MULT"})
+store.dispatch({type: "DEC"})

4-redux/src/js/4-async-middleware.js

@@ -0,0 +1,43 @@
+import { applyMiddleware, createStore } from "redux";
+import axios from "axios";
+import logger from "redux-logger";
+import thunk from "redux-thunk";
+import promise from "redux-promise-middleware";
+
+const initialState = {
+  fetching: false,
+  fetched: false,
+  users: [],
+  error: null,
+};
+
+const reducer = (state=initialState, action) => {
+  switch (action.type) {
+    case "FETCH_USERS_PENDING": {
+      return {...state, fetching: true}
+      break;
+    }
+    case "FETCH_USERS_REJECTED": {
+      return {...state, fetching: false, error: action.payload}
+      break;
+    }
+    case "FETCH_USERS_ FULFILLED": {
+      return {
+        ...state,
+        fetching: false,
+        fetched: true,
+        users: action.payload,
+      }
+      break;
+    }
+  }
+  return state
+}
+
+const middleware = applyMiddleware(promise(), thunk, logger())
+const store = createStore(reducer, middleware)
+
+store.dispatch({
+  type: "FETCH_USERS",
+  payload: axios.get("http://rest.learncode.academy/api/wstern/users")
+})

4-redux/src/js/client.js

@@ -1,35 +1,43 @@
-import { combineReducers, createStore } from "redux";
+import { applyMiddleware, createStore } from "redux";
+import axios from "axios";
+import logger from "redux-logger";
+import thunk from "redux-thunk";
+import promise from "redux-promise-middleware";
 
-const userReducer = (state={}, action) => {
-  switch(action.type) {
-    case "CHANGE_NAME": {
-      state = {...state, name: action.payload}
+const initialState = {
+  fetching: false,
+  fetched: false,
+  users: [],
+  error: null,
+};
+
+const reducer = (state=initialState, action) => {
+  switch (action.type) {
+    case "FETCH_USERS_PENDING": {
+      return {...state, fetching: true}
+      break;
+    }
+    case "FETCH_USERS_REJECTED": {
+      return {...state, fetching: false, error: action.payload}
       break;
     }
-    case "CHANGE_AGE": {
-      state = {...state, age: action.payload}
+    case "FETCH_USERS_FULFILLED": {
+      return {
+        ...state,
+        fetching: false,
+        fetched: true,
+        users: action.payload,
+      }
       break;
     }
   }
-  return state;
-};
+  return state
+}
 
-const tweetsReducer = (state=[], action) => {
-  return state;
-};
+const middleware = applyMiddleware(promise(), thunk, logger())
+const store = createStore(reducer, middleware)
 
-const reducers = combineReducers({
-  user: userReducer,
-  tweets: tweetsReducer,
+store.dispatch({
+  type: "FETCH_USERS",
+  payload: axios.get("http://rest.learncode.academy/api/wstern/users")
 })
-
-const store = createStore(reducers);
-
-store.subscribe(() => {
-  console.log("store changed", store.getState())
-})
-
-store.dispatch({type: "CHANGE_NAME", payload: "Will"})
-store.dispatch({type: "CHANGE_AGE", payload: 35})
-store.dispatch({type: "CHANGE_AGE", payload: 36})
-