[CREATE] Action Types & Reducers

Author: FMCalisto

README.md

@@ -116,6 +116,13 @@ npm install
 npm start
 ```
 
+3. To run the client
+
+```
+cd client/
+npm start
+```
+
 #### App
 
 ```

client/package-lock.json

@@ -10,7 +10,8 @@
     "react-dom": "^16.2.0",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
-    "react-scripts": "1.1.1"
+    "react-scripts": "1.1.1",
+    "redux": "^3.7.2"
   },
   "scripts": {
     "start": "set PORT=3001 && react-scripts start",

client/package.json

@@ -0,0 +1,8 @@
+/**
+ * Constants are important - they describe what type of action is performed
+ * within your app. Combined with the DevTools/logger, you can see how state
+ * and subsequently your UI is being affected.
+ */
+
+export const ADD_LIST = 'ADD_LIST';
+export const REMOVE_LIST = 'REMOVE_LIST';

client/src/constants/ActionTypes.js

@@ -0,0 +1,21 @@
+import { combineReducers } from 'redux';
+import list from './list';
+
+/**
+ * combineReducers is important to understand. As your app might grow in size
+ * and complexity, you will likely begin to split your reducers into separate
+ * functions - with each one managing a separate slice of the state! This helper
+ * function from 'redux' simply merges the reducers. Keep in mind we are using
+ * the ES6 shorthand for property notation.
+ *
+ * If you're transitioning from Flux, you will notice we only use one store, but
+ * instead of relying on multiple stores to manage diff parts of the state, we use
+ * various reducers and combine them.
+ *
+ * More info: https://redux.js.org/api-reference/combinereducers
+ */
+const rootReducer = combineReducers({
+  list, // you might be used to: list: list,
+});
+
+export default rootReducer;

client/src/reducers/index.js

@@ -0,0 +1,12 @@
+import { ADD_LIST, REMOVE_LIST } from '../constants/ActionTypes';
+
+export default function counter(state = 0, action) {
+  switch (action.type) {
+  case ADD_LIST:
+    return state + 1;
+  case REMOVE_LIST:
+    return state - 1;
+  default:
+    return state;
+  }
+}

client/src/reducers/list.js

@@ -3,7 +3,7 @@
 module.exports = function(server) {
   // Install a `/` route that returns server status
   var router = server.loopback.Router();
-  //router.get('/', server.loopback.status());
-  router.get('/');
+  router.get('/', server.loopback.status());
+  //router.get('/');
   server.use(router);
 };

server/boot/root.js

@@ -41,9 +41,7 @@
     }
   },
   "files": {
-    "loopback#static": {
-      "params": "$!../client/build"
-    }
+
   },
   "final": {
     "loopback#urlNotFound": {}