这是我的清单容器
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);
这是我的app.js文件
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> ); } }
这是我在Reducers文件夹中的index.js文件
import {combineReducers} from 'redux'; import BooksReducer from './reducer_books'; const rootReducer = combineReducers({ books:BooksReducer }); export default rootReducer;
这是我的主要index.js文件,用于在
import React from 'react'; import ReactDOM from 'react-dom'; import App from './components/app'; import './index.css'; ReactDOM.render( <App />, document.getElementById('root') );
这是我的减书器
export default function () { return [ {title: 'AAA1'}, {title: 'BBB2'}, {title: 'CCC3'}, {title: 'DDD4'}, ] }
请告诉我我错了。
创建store和中附上您的组件Provider一样
store
Provider
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') );