为什么 mapStateToProps 不起作用？

我最近开始使用 Redux，一切似乎都解决了。现在我又制作了一个组件，添加了更多reducers，action，然后调用combinedReducers，但由于某种原因发生了错误：this.props.books 未定义。我试图从 mapStateToProps 调用 console.log，据我了解，应用程序甚至没有进入它。有什么问题？

import React, { Component } from 'react';
import { Spinner, Row, Col, Container } from 'reactstrap';
import store from '../store/Store';
import { connect } from 'react-redux';
import getBooks from '../actions/ContentActions';
export class Books extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isFetching: true
        }
        this.fetchData = this.fetchData.bind(this);
    }
    async componentDidMount() {
        await this.fetchData(); // Получаю книги из API, чтобы занести их в store
    }

    async fetchData() {
        var data = {
            first: 1,
            last: 9
        }
        var response = await fetch('contentRequests/getBooksInRange', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data)
        })
            var result = await response.json();
        store.dispatch(getBooks(result)); // Вызываю экшн, который добавляет в store массив books, который приходит в result
        console.log(this.props);
        this.setState({isFetching:false });
    }

    render() {
        console.log(this.props);
        if (this.state.isFetching) {
            return (
                <Spinner animation="grow" variant="dark" />
            );
        }
//На этом месте возникает ошибка
        if (this.props.books !== null || this.props.books !== undefined) {
            var bookTitles = this.props.books.map((b) => <div><b>{b.bookTitle} ({b.publishYear})</b></div>);
            var bookAuthors = this.props.books.map((a) => <div>{a.authorName}</div>);
            var bookDescription = this.props.books.map((d) => <div>{d.description}</div>);
            var books = [];
            for (var i = 0; i < this.props.books.length; i++) {
                books.push(
                    <Col key={'book_' + i} md={4}>
                        {bookTitles[i]}
                        {bookAuthors[i]}
                        {bookDescription[i]}
                    </Col>);
            }
            return (
                <Container>
                    <h1>Каталог книг</h1>
                    <Row>
                        {books}
                    </Row>
                </Container>
            );
        }                

    }
}

const mapStateToProps = state => {
    console.log(state.books.books); // ничего в консоль не выводится
    return {
        books: state.books.books        
    }
}

export default connect(mapStateToProps, { getBooks })(Books); // Нужно ли тут передавать action в аргумент?

为代码写注释，以便您可以快速了解正在发生的事情

还会出现错误：Can't perform a React state update on an unmounted component.

减速器：

import { GET_BOOKS } from '../constants/ActionTypes';

export default function getBooksReducer(state = { books: [] }, action) {
    switch (action.type) {
        case GET_BOOKS:
            return Object.assign({}, state,
                {
                    books: action.books
                });
        default:
            return state;
    }
}

行动：

export const GET_BOOKS = 'GET_BOOKS';
export default function getBooks(books) {
    return {
        type: GET_BOOKS,
        books: books
    }
}

结合：

import { combineReducers } from 'redux'
import getBooksReducer from './ContentReducers';
import loginAccountReducer from './AccountReducers';

export default combineReducers({
    books: getBooksReducer,
    account: loginAccountReducer
})

店铺：

import { createStore } from 'redux';
import reducer from '../reducers/CombinedReducer';

const store = createStore(reducer);
export default store;