React not rendering updated UI on state change

Question

I'm working on a mini project where a user shall be able to edit book info. The app presents the user with a filter to choose Fiction or Science subject category. Once chosen, he is shown a list of books where he can change the details of the book by clicking the edit button. On editing, he can choose to either save or cancel the form details. This entire workflow is on a single page! I'm using React, Redux, and Redux-form for this purpose where component I - Selection category (Fiction, Science), component II - list of books for that category and component III - form to edit book details. See the attached image to imagine the app.

Working of the app : Once the user chooses Fiction/Science, an action is dispatched to list available books. Once he clicks Edit button for a book, another action is dispatched to display the form pre-filled with the book's values (so that the user can edit it).

The Problem : Unfortunately, my Edit form component is not rendering desired values due to unavailability of props to this component; even though I can see the success of my redux action with correct state/props.

Anatomy of code :

1. SubjectChoice.jsx

const mapDispatchToProps = dispatch => ({ fetchBooks: favoriteSubject => dispatch(getBooksList(favoriteSubject)), fetchSubjects: _ => dispatch(getSubjectsList()) });

So, this component correctly dispatches getSubjectsList and I can use fetchSubjects as props on componentDidMount . Similarly, it dispatches another action getBooksList(favoriteSubject) according to the chosen subject and fetchBooks can be used as props on handleChange callback (These actions make API request; in fact, all does)

2. BookList.jsx

const mapDispatchToProps = dispatch => ({ fetchBookDetails: bookId => dispatch(getBookDetails(bookId)) });

So, this component correctly dispatches getBookDetails action on handleEdit which is Edit button callback.

3. BookEdit.jsx

const mapStateToProps = state => ({ book: state.book.bookDetails, ... }... render() { const { bookDetails, loading, error } = this.props.book; ... }

Now, this component keeps on waiting to re-render but it never receives the props. I see the actions, reducers dispatching correctly in the console (from BooksList.jsx component) but never see them reflecting on screen.

How SO answers are not helping me get out of this situation : I saw answers where it's specified that redux does a shallow comparison and if it doesn't find a subtle difference in the previous and next state then it skips rendering the app. However, as mentioned in the third step I see the action and reducer with previous and next state correctly.

Answer 1

If BookEdit isn't connected to the store or the props aren't being passed from a parent component you will not have access to them. Either connect your BookEdit...

import { connect } from 'react-redux;
...
const mapStateToProps = ({ book }) => {
  const { bookDetails, loading, error } = book;
  return { bookDetails, loading, error };
}
export default connect(mapStateToProps)(BookEdit);

Or pass them in from a parent connected component that is bringing in props from your store.

Answer 2

Every time Redux actions are dispatched, mapStateToProps will be executed. The connect function from react-redux will only re-render your component when the props from mapStateToProps are not equal to the previous props.