Как правильно прописать Dispatch?

Через функцию map вывел на страннице блоки-ссылки из хранилища. по задумке при нажатии должен сработать переход на другую странницу и там выводится контент из того же хранилища с тем же id, что и блок-ссылка. Этого не происходит т.к я понятия не имею как прописать dispatch.

вот код

src/app.js

import React, { Component } from 'react';
import { Grid, Row, Col } from 'react-bootstrap';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import select from './actions/select';
import './App.css';
class App extends Component {
  BoxOne(){
    return this.props.tabletOne.map((item) => {
        return(
            <a 
              key={item.id} 
              href='/any'
              onClick={() =>{
                this.props.select(item)
              }}  >
              <Col md={12} className="classesContainer">
                <Row>
                  <Col md={8} sm={8} xs={12} className="textDivTablet">
                    <h3>{item.caption}</h3>
                    <p>{item.text}</p>
                  </Col>
                </Row>  
              </Col>
            </a>
          );
      })
  }
  render() {
    return (
      <Grid>
       <Row>
         <Col>
           {this.BoxOne()}
         </Col>
       </Row>
      </Grid>
    );
  }
}
const mapStateToProps= (state) => {
  return{
  tabletOne: state.tabletOne
  };
}
//Проблема думаю здесь
const mapDispatchToProps= (dispatch) => {
  return {select: dispatch(select())}
}
export default connect (mapStateToProps, mapDispatchToProps) (App);

Остальные компоненты:

src/action/select.js

const select = (item) => {
  return{
  type: "CLASS_SELECTED",
  payload: item
  }
}
export default select;

src/reducers/action_class.js

export default function(state = null, action){
  switch(action.type){
  case "CLASS_SELECTED":
    return action.payload;
  default:
    return state;
  }
}

src/any-classes/Any.js - здесь должно произойти чудо, но оно не происходит и выводит TypeError: Cannot read property 'main_bg' of null

import React, { Component } from 'react';
import { Grid, Row, Col } from 'react-bootstrap';
import { connect } from 'react-redux';
import './Any.css';

class AnyClass extends Component{
  render(){
    return(
      <div className={this.props.item.main_bg}>
      <Grid className="wrappClassesDiv">
        <Row>
        <Col md={12} className="captionDiv">
        <Row>
        <Col md={10} sm={12} xs={12} >
          <h2>{this.props.item.name}</h2>
          <h4>{this.props.item.battleType}</h4>
        </Col>
        <Col md={2} sm={12} xs={12} >
          <a href="http://localhost:3000/classes">
          <button className="btnStyle mouse-cursor-gradient-tracking">
          <span>Вернуться назад</span>
          </button>
          </a>
        </Col>
        </Row>
        </Col>  
        <br/>
        <br/>
        <br/>
        <Col md={4} className="heroDesc">
          <h4>{this.props.item.descChapter}</h4>
          {this.props.item.descInfo}
          <h4>Описание</h4>
          {this.props.item.descDesc}
          <br/>
          {this.props.item.charList}
        </Col>
        <Col md={4} ></Col>
        <Col md={4} className={this.props.item.paper_bg}>
          <h3>Особенности</h3>
          {this.props.item.features}
        </Col>
        </Row>
      </Grid>
      </div>
      );
  }
};
const mapStateToProps = (state) => {
  return{
    item: state.action_class
  };
}
export default connect(mapStateToProps) (AnyClass);