React / Redux图书清单项目

如何解决React / Redux图书清单项目

请任何人可以帮助我解决这个问题

• 我想将API调用添加到测试API https://swapi.co/中，该API会为应用程序中的每个“书”列表加载人员记录并显示在屏幕上。
• 示例项目中的书与测试API中的人之间没有实际链接。而是按ID号链接：book / 1应该链接到people / 1

这是我的代码和项目结构

actions


export function selectBookAction(book) {
console.log(book)
return {
    type: 'BOOK_SELECTED',payload: book
}

}

组件

import React,{ Component } from 'react';
import BookList from '../containers/book-list'
import BookDetail from '../containers/book-detail'

export default class App extends Component {
render() {
return (
  <div>
    <BookList />
    <BookDetail />
  </div>
);
}
}

容器

图书详细信息

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

class BookDetail extends Component {
render() {
    let bookDetail = "Not selected book !"
    if (this.props.activeBook) {
        bookDetail = this.props.activeBook.title
    }
    return (
        <div>{bookDetail}</div>
    )
}

}

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

}

export default connect(mapStateToProps)(BookDetail)

书单

import React,{ Component } from 'react'
import { connect } from 'react-redux'
import { selectBookAction } from '../actions/select-book-action'
import { bindActionCreators } from 'redux'

class BookList extends Component {
renderList() {
    return this.props.books.map( book => {
        return (
            <li 
                key={book.title} 
                onClick={() => this.props.selectBook(book)}
                className="list-group-item">
                {book.title}
            </li>
        )
    })
}

render() {
    return (
        <ul className="list-group col-sm-4">
            {this.renderList()}
        </ul>
    )
}

}

function mapDispatchToProps(dispatch) {
return bindActionCreators({ selectBook: selectBookAction },dispatch)

}

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

}

export default connect(mapStateToProps,mapDispatchToProps)(BookList)

减速器

索引

import { combineReducers } from 'redux';
import BooksReducer from './reducer_books'
import ActiveBookReducer from './reducer_active_book'

const rootReducer = combineReducers({
books: BooksReducer,activeBook: ActiveBookReducer

}）

export default rootReducer

reducer_active_book

export default function(state = null,action) {
switch(action.type) {
    case 'BOOK_SELECTED':
        return action.payload;
}
return state
}

reducer_books

export default function () {
return [
    {'title': 'Book1'},{'title': 'Book2'},{'title': 'Book3'},{'title': 'Book4'}
]
}

索引

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore,applyMiddleware } from 'redux';

import App from './components/app';
import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware()(createStore);

ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<App />
</Provider>,document.querySelector('.container'));