Hiyper Hiyper - 26 days ago 4
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) {
case "BOOK_SELECTED":
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 (
<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);


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?

Answer

Your state has a ActiveBook not activeBook object:

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