как решить проблему TypeError: Cannot destructure property 'books' of 'this.props.books' as it is undefined

Учу redux, постоянно застреваю на функции connect(): она просто-напросто не работает, не даёт доступа к стору компоненту, из за этого постоянно вылазит ошибка.

TypeError: Cannot destructure property 'books' of 'this.props.books' as it is undefined.

App.js

import React, { Component } from "react";
import { connect } from "react-redux";

export class App extends Component {
  render() {
    console.log(this.props.books)
    const { books } = this.props.books;
    return (
      <div className="App">
          <h1>{books[0]}</h1>
      </div>
    )
  }
}

const mapStateToProps = state => ({
  ...state
})

export default connect(mapStateToProps)(App);

Store.js

import React from 'react';
import Redux from "redux";
import { App } from './App';
import store from "./store.js";
import { Provider } from "react-redux";
import ReactDOM from 'react-dom';
import reportWebVitals from './reportWebVitals';
import createStore from "./store.js";

let storeTwo = createStore();

setTimeout(function() {
    storeTwo.dispatch({
        type: "SET_BOOKS",
        payload: [
            {
                id: 0,
                title: "just book"
            }
        ]
    })
}, 1000)

ReactDOM.render(
    <Provider store={store()}>
    <App />
    </Provider>,
  document.getElementById('root')
);

reportWebVitals();

index.js

import { createStore, applyMiddleware } from "redux";
import logger from "redux-logger";
import rootReducer from "./REDUCERS/rootReducer";

export default () => {
    const store = createStore(rootReducer, applyMiddleware(logger));
    return store;
};

rootReducer.js

import { combineReducers } from "redux";
import books from "./books.js";

export default combineReducers({
    books,
})

books.js

const defaultState = {
    books: [{
        id: 1,
        title: "just book",
        price: "150$"
    }]
}

export default (state = defaultState, action) => {
    switch (action.type) {
        case "SET__BOOKS":
            return {
                ...state,
                books: action.payload
            }
        case "ADD_BOOKS":
            return {
                books: [
                    ...state.books,
                    action.payload
                ]
            }
        default: 
            return state
    };
};

Ответы (1 шт):

Автор решения: Aziz Umarov

Замените

const { books } = this.props.books;

На

const books = this.props.books;
→ Ссылка