map function not working after implementing redux in react

I'm new to react and redux and I have created a small ecommerce app. But, before implementing redux, everything was working fine and after implementing it I'm getting "Cannot read property 'map' of undefined". So, I'm sharing my code below

index.js

import React from "react";
import ReactDOM from "react-dom";
import Main from "./Main";
import "./index.css";
import 'bootstrap/dist/css/bootstrap.css';
import {BrowserRouter} from 'react-router-dom';
import { Provider } from 'react-redux';
import { Configuration } from './redux/configureStore';

const store = Configuration();

ReactDOM.render((

<Provider store={store}>
<BrowserRouter>
   <Main/>
   </BrowserRouter>
</Provider>
), 
  document.getElementById("root")
); 

Main.js

import React, { Component } from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import { Route, Switch, withRouter} from 'react-router-dom';
import Navigation from "./components/topNavigation";
import Footer from "./components/Footer";
import Banner from "./components/Banner";
import PLPMenu from "./components/PLPMenu";
import PDP from "./components/PDP";
import Login from "./components/Login"
import Home from "./components/Home";


import {connect} from 'react-redux';

const mapStateToProps = state =>{
  return {
    topnavigation: state.topnavigation,
    plpmenu: state.plpmenu,
    pdpmenu : state.pdpmenu
  }
}

class Main extends Component {
render() {

    return (


        <div>

          <Login />
          <Navigation />

          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/Apparel/:category/:subCategory/:id" component={PLPMenu} />
            <Route path="/Apparel/:product/:id" component={PDP} />
            <Route path="/login" component={Login} />
            <Route path="/Banner" component={Banner} />
            <Route path="/Footer" component={Footer} />
          </Switch>


        </div>

    )

  }


}

export default withRouter(connect(mapStateToProps)(Main));

topNavigation.js

import React, { Component } from 'react';
import axios from 'axios';
import SubMenu from './subMenu';


 class Navigation extends Component {

  state = {
    mainCategory: []
  }

  componentDidMount() {
    axios.get('http://localhost:3030/topCategory')
      .then(res => {
       // console.log(res.data.express);
        this.setState({
          mainCategory: res.data.express.catalogGroupView
        })
      })
  }



  render() {

    const { mainCategory } = this.props;

    return (

      <nav className="navbar navbar-expand-lg navbar-dark bg-dark mainmenu">
        <a className="navbar-brand" href="#">iFashion</a>
        <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" id="navbarNav">

          <ul className="navbar-nav ml-auto">

            {
              mainCategory.map(navList => (
                <li className="nav-item dropdown" key={navList.uniqueID}>
                  <a className="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{navList.name} </a>
                  <ul className="dropdown-menu secondDropdown" aria-labelledby="navbarDropdown">
                    <SubMenu below={navList.catalogGroupView} />
                  </ul>
                </li>
              ))

            }

          </ul>

        </div>
      </nav>



    )

  }


}

export default Navigation;

In the ./src/redux folder I have created two files - reducer.js & configureStore.js

reducer.js

import PLPMenu from "../components/PLPMenu";
import PDP from "../components/PDP";
import Navigation from "../components/topNavigation";

export const initialState = {
    topnavigation: Navigation,

};

export const Reducer = ( state = initialState , action) => {
      return state;
};

configureStore.js

import { createStore} from 'redux';
import {Reducer, initialState} from './reducer';

export const Configuration = () =>{
    const store = createStore(
        Reducer,
        initialState,
    );

    return store;
}

I don't know where my code is getting wrong. But, before implementing redux, it was all working fine. All I'm getting errors is

Can anyone please give me an insight, how to proceed with this particular error. Or guide me to troubleshoot this issue. Thanks

Updated: After changing this.state from this.prop, now my responses are coming. But in the browser, it is all blank.