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