Reux容器在Redux状态更改后不重新更新

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};
}