Explorar el Código

[ADD] container and app states

Gogs hace 7 años
padre
commit
faf8c05d20

+ 4 - 0
package.json

@@ -15,6 +15,7 @@
     "react-router-redux": "^5.0.0-alpha.9",
     "react-scripts": "1.1.1",
     "redux": "^3.7.2",
+    "redux-thunk": "^2.2.0",
     "typeface-roboto": "^0.0.54"
   },
   "scripts": {
@@ -22,5 +23,8 @@
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
+  },
+  "devDependencies": {
+    "redux-logger": "^3.0.6"
   }
 }

+ 2 - 3
src/actions/index.js

@@ -1,5 +1,4 @@
 import axios from 'axios'
-import { CONTAINERS } from '../constants/ResourceNames'
 import { REQUEST_OK, REQUEST_KO } from '../constants/ActionTypes'
 
 /**
@@ -7,7 +6,7 @@ import { REQUEST_OK, REQUEST_KO } from '../constants/ActionTypes'
  * @param {*} resource 
  */
 export const get = (resource) => dispatch => {
-    return axios.get(`/api/v1${resource}`).then(response => console.log(response))
+    return axios.get(`/api/v1${resource}`).then(response => dispatch(ok(resource, response.data))).catch(error => dispatch(ko(resource, error)));
 }
 
 /**
@@ -34,4 +33,4 @@ export const ko = (resource, payload) => {
         resource,
         payload
     }
-}
+}

+ 30 - 1
src/components/pages/ContainersList.js

@@ -1,8 +1,15 @@
 import React, { Component } from 'react'
+import { connect } from 'react-redux'
 import Base from '../common/Base'
 import ContainersTable from '../tables/ContainersTable'
+import { get } from '../../actions'
+import { CONTAINERS } from '../../constants/ResourceNames'
 
 class ContainerList extends Component {
+    componentDidMount() {
+        this.props.loadData()
+    }
+
     render() {
         return (
             <Base title={this.props.title}>
@@ -12,4 +19,26 @@ class ContainerList extends Component {
     }
 }
 
-export default ContainerList
+/**
+ * 
+ * @param {*} state 
+ * @param {*} props 
+ */
+const mapStateToProps = (state, props) => {
+    return {
+        data: state.containers
+    }
+}
+
+/**
+ * 
+ * @param {*} state 
+ * @param {*} props 
+ */
+const mapDispatchToProps = (dispatch, props) => ({
+    loadData() {
+        dispatch(get(CONTAINERS))
+    }
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(ContainerList)

+ 43 - 0
src/reducers/app.js

@@ -0,0 +1,43 @@
+import { REQUEST_KO, REQUEST_GET, REQUEST_WAIT } from "../constants/ActionTypes";
+
+const initialState = {
+    status: 0,
+    message: null
+}
+
+/**
+ * 
+ * @param {*} state 
+ * @param {*} action 
+ */
+export const app = (state = initialState, action) => {
+    if (action.type === REQUEST_GET) {
+        return {
+            status: 0,
+            message: action.payload
+        }
+    }
+
+    if (action.type === REQUEST_GET) {
+        return {
+            status: 1,
+            message: action.payload
+        }
+    }
+
+    if (action.type === REQUEST_WAIT) {
+        return {
+            status: 2,
+            message: action.payload
+        }
+    }
+
+    if (action.type === REQUEST_KO) {
+        return {
+            status: 3,
+            message: action.payload
+        }
+    }
+
+    return state
+}

+ 1 - 0
src/reducers/containers.js

@@ -1,6 +1,7 @@
 import { CONTAINERS } from '../constants/ResourceNames'
 import { REQUEST_GET } from '../constants/ActionTypes';
 
+
 /**
  * 
  * @param {*} state 

+ 5 - 1
src/reducers/index.js

@@ -1,19 +1,23 @@
 import { createStore, combineReducers, applyMiddleware } from 'redux'
 import { routerReducer, routerMiddleware } from 'react-router-redux'
 import createBrowserHistory from 'history/createBrowserHistory'
+import ThunkMiddleware from  'redux-thunk'
+import LoggerMiddleware from 'redux-logger'
 
+import { app } from './app'
 import { containers } from './containers'
 
 const history = createBrowserHistory()
 
 const rootReducer = combineReducers({
+    app,
     containers,
     router: routerReducer
 })
 
 const RouterMiddleware = routerMiddleware(history)
 
-const store = createStore(rootReducer, applyMiddleware(RouterMiddleware))
+const store = createStore(rootReducer, applyMiddleware(RouterMiddleware, ThunkMiddleware, LoggerMiddleware))
 
 export {
     history,

+ 14 - 0
yarn.lock

@@ -1926,6 +1926,10 @@ decode-uri-component@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
 
+deep-diff@^0.3.5:
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/deep-diff/-/deep-diff-0.3.8.tgz#c01de63efb0eec9798801d40c7e0dae25b582c84"
+
 deep-equal@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
@@ -6045,6 +6049,16 @@ reduce-function-call@^1.0.1:
   dependencies:
     balanced-match "^0.4.2"
 
+redux-logger@^3.0.6:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/redux-logger/-/redux-logger-3.0.6.tgz#f7555966f3098f3c88604c449cf0baf5778274bf"
+  dependencies:
+    deep-diff "^0.3.5"
+
+redux-thunk@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.2.0.tgz#e615a16e16b47a19a515766133d1e3e99b7852e5"
+
 redux@^3.7.2:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/redux/-/redux-3.7.2.tgz#06b73123215901d25d065be342eb026bc1c8537b"