“找不到"商店“在上下文或道具中"我在尝试简单的 react-redux 代码时遇到此错误 [英] "Could not find "store" in either the context or props" I'm getting this error while trying simple react-redux code
本文介绍了“找不到"商店“在上下文或道具中"我在尝试简单的 react-redux 代码时遇到此错误的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这是我的书单容器
import React, {Component} from 'react';从'react-redux'导入{连接};类 BookList 扩展组件{渲染列表(){返回 this.props.books.map((book)=>{返回(<li key={book.title}>{book.title}</li>);});}使成为(){返回(<ul>{this.renderList()})}}函数 mapStateToProps(state){返回{书籍:state.books};}导出默认连接(mapStateToProps)(BookList);
这是我的 app.js 文件
import React from 'react';从反应"导入{组件};从 '../containers/book-list' 导入 BookList;导出默认类 App 扩展组件{使成为(){返回(<div><div>React 简单应用</div><书单/>
);}}
这是我在 Reducers 文件夹中的 index.js 文件
从'redux'导入{combineReducers};从 './reducer_books' 导入 BooksReducer;const rootReducer = combineReducers({书籍:BooksReducer});导出默认的 rootReducer;
这是我的主要 index.js 文件,它在
上呈现应用程序组件从'react'导入React;从 'react-dom' 导入 ReactDOM;从'./components/app'导入应用程序;导入'./index.css';ReactDOM.render(<应用程序/>,document.getElementById('root'));
这是我的书本减速器
导出默认函数(){返回 [{title: 'AAA1'},{title: 'BBB2'},{title: 'CCC3'},{title: 'DDD4'},]}
请告诉我我错在哪里.
解决方案
创建一个 store
并将您的组件封装在一个 Provider
中,例如
import {createStore} from 'redux';从'react-redux'导入{提供者}导入 RootReducer 表单 '/path/to/rootreducer';从反应"导入反应;从 'react-dom' 导入 ReactDOM;从'./components/app'导入应用程序;导入'./index.css';const store = createStore(RootReducer);ReactDOM.render(<提供者商店={商店}><应用程序/></提供者>,document.getElementById('root'));
This is my booklist container
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(
<ul>
{this.renderList()}
</ul>
)
}
}
function mapStateToProps(state){
return{
books : state.books
};
}
export default connect(mapStateToProps)(BookList);
This is my app.js file
import React from 'react';
import { Component } from 'react';
import BookList from '../containers/book-list';
export default class App extends Component{
render(){
return(
<div>
<div>React simple App</div>
<BookList/>
</div>
);
}
}
This is my index.js file in Reducers folder
import {combineReducers} from 'redux';
import BooksReducer from './reducer_books';
const rootReducer = combineReducers({
books:BooksReducer
});
export default rootReducer;
This is my main index.js file which renders app component on
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/app';
import './index.css';
ReactDOM.render(
<App />,
document.getElementById('root')
);
This is my books reducer
export default function () {
return [
{title: 'AAA1'},
{title: 'BBB2'},
{title: 'CCC3'},
{title: 'DDD4'},
]
}
Please tell me where I am wrong.
解决方案
Create a store
and enclose your components within a Provider
like
import {createStore} from 'redux';
import { Provider } from 'react-redux'
import RootReducer form '/path/to/rootreducer';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/app';
import './index.css';
const store = createStore(RootReducer);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
这篇关于“找不到"商店“在上下文或道具中"我在尝试简单的 react-redux 代码时遇到此错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文