Fetching data from redux for admin categories

src/components/Admin/Categories.js

@@ -2,24 +2,7 @@ import React, { Component, Fragment } from 'react';
 import "antd/dist/antd.css";
 import { connect } from "react-redux";
 import { Button,Modal,Input,Table, Divider } from 'antd';
-
-const data = [
-  {
-    key: '1',
-    Name: 'Mechanic',
-    number: 32,
-  },
-  {
-    key: '2',
-    Name: 'Plumber',
-    number: 42,
-  },
-  {
-    key: '3',
-    Name: 'Electrician',
-    number: 32,
-  },
-];
+import {fetchCategory} from "../../redux/actions/adminActions";
 
 class Categories extends Component {
 
@@ -43,6 +26,10 @@ class Categories extends Component {
     });
   }
 
+  componentWillMount(){
+    this.props.fetchCategory();
+  }
+
   render() {
     const { isAuthenticated, user } = this.props;
     const { Column } = Table;
@@ -62,9 +49,9 @@ class Categories extends Component {
           >
                <Input placeholder="Enter the name of the category" />
            </Modal>
-           <Table dataSource={data}>
-            <Column title="Category Name" dataIndex="Name" key="Name" />
-            <Column title="Number" dataIndex="number" key="number" />
+           <Table dataSource={this.props.cat}>
+            <Column title="Category Name" dataIndex="title" key="title" />
+            <Column title="Number" dataIndex="id" key="id" />
 
             <Column
               title="Action"
@@ -91,10 +78,11 @@ class Categories extends Component {
 
 const mapStateToProps = state => ({
   isAuthenticated: state.auth.isAuthenticated,
-  user: state.auth.user
+  user: state.auth.user,
+  cat:state.categorylist.category,
 });
 
 export default connect(
   mapStateToProps,
-  {}
+  {fetchCategory}
 )(Categories);

src/redux/actions/adminActions.js

@@ -0,0 +1,15 @@
+import {FETCH_CATEGORY} from './type';
+import axios from 'axios';
+
+export const fetchCategory =()=>{
+    return dispatch =>{
+        axios.get('https://jsonplaceholder.typicode.com/posts')
+            .then(res=>{
+                dispatch({
+                    type:FETCH_CATEGORY,
+                    payload: res.data,
+                })
+            })
+    }
+};
+

src/redux/actions/type.js

@@ -22,4 +22,6 @@ export const GET_ALL_CATEGORIES_PENDING = 'GET_ALL_CATEGORIES_PENDING';
 export const GET_ALL_CATEGORIES_SUCCESS = 'GET_ALL_CATEGORIES_SUCCESS';
 
 export const GET_CATEGORY_WISE_SERVICES_PENDING = 'GET_CATEGORY_WISE_SERVICES_PENDING';
-export const GET_CATEGORY_WISE_SERVICES_SUCCESS = 'GET_CATEGORY_WISE_SERVICES_SUCCESS';
+export const GET_CATEGORY_WISE_SERVICES_SUCCESS = 'GET_CATEGORY_WISE_SERVICES_SUCCESS';
+
+export const FETCH_CATEGORY='FETCH_CATEGORY';

src/redux/reducers/adminReducer.js

@@ -0,0 +1,18 @@
+import {FETCH_CATEGORY} from '../actions/type';
+
+const initState={
+    category:[],
+}
+
+const fetchCategory=(state=initState,action)=>{
+    switch(action.type){
+        case FETCH_CATEGORY:
+            return {
+                ...state,
+                category:action.payload
+            }
+        default: return state;
+    }
+
+}
+export default fetchCategory;

src/redux/reducers/index.js

@@ -3,15 +3,15 @@ import vendorReducer from './vendorReducer';
 import AuthReducer from './authReducer';
 import ErrorReducer from './errorReducer';
 import UserReducer from './userReducer';
-import CategoryReducer from './categoryReducer';
-import ServiceReducer from './serviceReducer';
+import CategoryServiceReducer from './categoryServiceReducer';
+import adminReducer from './adminReducer';
 
 
 export default combineReducers({
   auth: AuthReducer,
   error: ErrorReducer,
   user: UserReducer,
   vendor: vendorReducer,
-  category: CategoryReducer,
-  service: ServiceReducer
+  categoryService: CategoryServiceReducer,
+  categorylist:adminReducer,
 });