Redux状态更改后，React容器未重新发送

Question

我正在使用Redux和React，但遇到了问题。 我正在制作一个书单，一旦您单击该书单，您将看到有关该书的详细信息。

当我选择一本书时，该动作已正确处理，状态已更改。

// reducer_active_book.js
export default function(state = null, action) {
    switch(action.type) {
        case "BOOK_SELECTED":
            console.log("Current State [Reducer]: ",state);
            console.log("New State [Reducer]: ",action.payload);
            return action.payload;
    }

    return state;   
}

当我单击一本书时，可以在控制台中找到它（所以我知道上面的命令可以正常工作）

我也从上面的日志中知道我的容器知道，因为正在调用mapStateToProps。

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

class BookDetail extends Component {
    render() {
        if(!this.props.book) {
            return <div>Select a Book.</div>;
        }

        return (
            <div>
                <h3>Details For:</h3>
                <div>{this.props.book.title}</div>
            </div>
        );
    }
}

function mapStateToProps(state) {
    console.log("mapStateToProps called (connect)");
    return {book: state.activeBook};
}

export default connect(mapStateToProps)(BookDetail);

组合减速器：

import { combineReducers } from 'redux';
import BooksReducer from "./reducer_books";
import ActiveBook from  "./reducer_active_book";
const rootReducer = combineReducers({
  books: BooksReducer,
  ActiveBook: ActiveBook
});

export default rootReducer;

在最初的“选择一本书”之后，该项目永远不会重新呈现。 是什么原因造成的？

Answer 1

您的州有一个ActiveBook而不是activeBook属性：

function mapStateToProps(state) {
    console.log("mapStateToProps called (connect)");
    return {book: state.ActiveBook};
}