React应用报错：Connect(Booklist)上下文未找到store的技术问询

你的问题核心是没有用Redux的<Provider>组件包裹根组件，导致connect高阶组件无法从React上下文中获取到Redux Store。另外你的代码里还有几处小错误，我来一步步帮你修正：

1. 修复Reducer目录的index.js导出错误 #

你现在错误地导出了单个reducer，而不是组合后的根reducer，这会导致Store无法正确创建：

// reducer/index.js
import { combineReducers } from 'redux'; // 补上缺失的引号
import booksReducer from './books_reducer';

const rootReducer = combineReducers({
  books: booksReducer
});

export default rootReducer; // 原来导出的是booksReducer，现在改为rootReducer

2. 创建Redux Store并在根组件外层添加<Provider> #

在Create React App默认的入口文件index.js里，创建Store并用Provider包裹你的<App>组件，把Store注入到全局上下文：

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './reducer';

// 创建Redux Store
const store = createStore(rootReducer);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}> {/* 用Provider包裹App，传递store */}
    <App />
  </Provider>
);

3. 修复books_reducer.js的语法错误 #

你的reducer里的书名没有加引号，这会触发语法报错：

// books_reducer.js
export default function(){
  return[
    {title: 'book1'}, // 补上引号
    {title: 'book2'},
    {title: 'book3'},
    {title: 'book4'} // 修改重复的书名，避免key冲突
  ]
}

4. 修正Booklist组件的render逻辑错误 #

你当前的render方法会遍历书籍数组生成多个<ul>容器，这不符合预期，应该只返回一个列表容器：

// container/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(){
    // 修正：只返回一个ul容器，内部渲染列表项
    return (
      <ul>{this.renderList()}</ul>
    );
  }
}

function mapStateToProps(state){
  return { books: state.books }
}

export default connect(mapStateToProps)(Booklist);

做完这些修改后，你的图书列表应用应该就能正常运行了。核心逻辑是通过<Provider>把Redux Store注入到整个React应用的上下文，让connect组件能正确获取到状态数据。

内容的提问来源于stack exchange，提问作者fhei izze