反应错误：“在...的上下文中找不到'商店'”

Question

我在运行我的 react 应用程序时收到此错误消息：

在“Connect(Booklist)”的上下文中找不到“store”。任何一个 将根组件包装在 a 中，或传递自定义 React 上下文提供者和相应的 React 上下文 消费者在连接选项中连接（书单）。

我正在使用 Create React App 并尝试创建一个列出一些详细信息的应用。

见下面的代码：

app.js

import React, { Component } from 'react';
import './App.css';
import Booklist from './container/book-list';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Booklist />
      </div>
    );
  }
}

export default App;

book-list.js

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

class Booklist extends Component{  
    renderList(){
        return this.props.books.map((book) =>{
            return(
                <li key={book.title}>{book.title}</li>
            );
        }
        );
    }
    render(){
        return this.props.books.map((book) =>{
            return(
                <ul>{this.renderList()}</ul>
            );
        }
        );
    }
}
function mapStateToProps(state){
    return {
        books: state.books
    }
}
export default connect (mapStateToProps)(Booklist);

books_reducer.js

export default function(){
    return[
        {title: booke1},
        {title: booke2},
        {title: booke3},
        {title: booke3}
    ]
}

reducer 中的 index.js

import {combineReducers} from redux;
import booksReducer from './books_reducer'
const rootReducer = combineReducers({
    books: booksReducer
}); 

export default booksReducer;

Answer 1

当我们使用 Redux 时，我们必须创建 Store 来存储我们应用程序的所有减速器。我们将所有减速器组合在单个组件中，例如。

import {combineReducers} from 'redux';
import BooksReducer from './Books';
import ActiveBookReducer from './activeReducer';
const RootReducer = combineReducers({   
 books : BooksReducer,
 activeBookreducer : ActiveBookReducer 
})
 export default RootReducer;

在上面的示例中，我创建了两个 Reducer BookReducer 和 ActiveBookReducer，并使用 combineReducer 将它们存储在名为 RootReducer 的单个 Reducer 中。

1. 在您的 index.js 文件中首先导入提供程序和 createStore 库。
2. 在 index.js 文件中导入 RootReducer。
3. 然后使用 createStore 库获取一个名为 store 和存储 RootReducer 的变量。const store = createStore(RootReducer);
4. 然后在index.js中添加provider：<Provider store = {store}> <App /> </Provider>,

5. 您的代码应如下所示：

   import React from 'react';
   import ReactDOM from 'react-dom';
   import {Provider} from 'react-redux';
   import { createStore } from 'redux';
   import App from './Components/App';
   import RootReducer from './Reducers';
   const store = createStore(RootReducer);
   ReactDOM.render(
    <Provider store = {store}>
     <App />
    </Provider>,
   document.getElementById('root')
   );
   

Answer 2

您是否在商店中包装您的应用程序？

import { Provider } from 'react-redux';
const store = createStore(
    combineReducers({
        books: booksReducer
    });
)
<Provider store={store}>
            <App />
        </Provider>