как решить проблему 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;