Функция карты не работает после реализации redux в реакции

Я новичок в реагировании и сокращении, и я создал небольшое приложение для электронной коммерции. Но до реализации redux все работало нормально, и после его реализации я получаю сообщение «Невозможно прочитать карту свойства undefined». Итак, я делюсь своим кодом ниже

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;

В папке ./src/redux я создал два файла - 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;
}

Я не знаю, где мой код ошибается. Но до реализации redux все работало нормально. Все, что я получаю, это

Может ли кто-нибудь дать мне представление, как действовать с этой конкретной ошибкой. Или посоветуйте мне устранить эту проблему. Спасибо

Обновлено: После изменения this.state на this.prop теперь приходят мои ответы. Но в браузере все пустое.