Load data from Redux state

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/AppList.js

@@ -1,30 +1,25 @@
 import React from "react";
 import AppCard from "./AppCard";
 import {Col, Row} from "antd";
+import {connect} from "react-redux";
 
-class AppList extends React.Component {
+// connecting state.articles with the component
+const mapStateToProps= state => {
+    return {apps : state.apps}
+};
+
+
+class ConnectedAppList extends React.Component {
     constructor(props) {
         super(props);
-        this.state = {
-            apps: [
-                {
-                    id: 1,
-                    title: 'Hi',
-                    platform: 'android',
-                    description: 'lorem',
-                    subType: 'FREE',
-                    type: 'ENTERPRISE'
-                }
-            ]
-        }
     }
 
     render() {
         return (
             <Row gutter={16}>
-                {this.state.apps.map(app => (
+                {this.props.apps.map(app => (
-                    <Col xs={24} sm={12} md={6} lg={6}>
+                    <Col key={app.id} xs={24} sm={12} md={6} lg={6}>
-                        <AppCard title={app.title}
+                        <AppCard key={app.id} title={app.title}
                                  platform={app.platform}
                                  type={app.type}
                                  subType={app.subType}
@@ -36,4 +31,6 @@ class AppList extends React.Component {
     }
 }
 
+const AppList = connect(mapStateToProps)(ConnectedAppList);
+
 export default AppList;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/reducers/index.js

@@ -1,7 +1,22 @@
 import {GET_APPS} from "../constants/action-types";
 
 const initialState = {
-    apps : []
+    apps: [{
+        id: 1,
+        title: 'Hi',
+        platform: 'android',
+        description: 'lorem',
+        subType: 'FREE',
+        type: 'ENTERPRISE'
+    },
+        {
+            id: 2,
+            title: 'Hi',
+            platform: 'android',
+            description: 'lorem',
+            subType: 'FREE',
+            type: 'ENTERPRISE'
+        }]
 };
 
 function rootReducer(state = initialState, action) {