React容器在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}; 
}