Hiyper Hiyper - 7 months ago 35
Node.js Question

React Container not Re-Rending after Redux State Change

I am working on Redux and React and I have run into an issue. I am making a book list, and once you click the book list you will see details about the book.

When I select a book, the action is correctly being handled and the state is changed.

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

return state;

When I click a book, I get this in the console (so I know the above is functioning correctly)

enter image description here

Also I know from the above log that my container is aware, as mapStateToProps is being called.

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 (
<h3>Details For:</h3>

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

export default connect(mapStateToProps)(BookDetail);

Combine reducers:

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;

The item never re-renders after the initial "Select a Book". What could be causing this?


Your state has a ActiveBook not activeBook object:

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