Redux 状态更改后 React Container 不重新渲染

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