Redux devTools shows difference in state, but React component won't update - reactjs

Question

I have a React app with buttons that fetch recent bills and top donors for each Congress member. Both actions (fetchBillsByRep and getRepFinances) fetch correct data and correctly update Redux state. BUT. While fetching bills results in immediate re-render, fetching donors does not.
I have read more than a dozen answers to similar questions, and have tried the solutions. I am not mutating state; I always make a new copy. I am hitting debuggers where I expect to - and getting all values as expected.
inside MemberCard component, handleDonorsClick
//donors
handleDonorsClick = () => {
let id = this.props.crp_id
if (this.props.chamber === "senate"){
this.props.getSenatorFinances(id)
} else if (this.props.chamber === "house"){
this.props.getRepFinances(id)
}
this.setState({ showDonors: true })
debugger
//showDonors = true
}
HouseActions action creators: all values as expected:
export function fetchBillsByRep(id){
return (dispatch) => {
return fetch(API_BASE_URL+'/search/bills/member/'+id)
.then(resp => resp.json())
.then(bills => {
if (!bills.error) {
dispatch({type:"FETCH_BILLS_BY_REP", payload: { bills: bills, id:id}})
} else {
alert(bills.error.fullMessage)
}
}
).catch(error => alert(error))
}
}
export function getRepFinances(id){
return (dispatch) => {
return fetch(API_BASE_URL+'/search/financial_disclosures/member/'+id)
.then((resp) => resp.json())
.then(financialDisclosure => {
if (!financialDisclosure.error) {
dispatch({
type:"GET_REP_FINANCES",
payload: { financialDisclosure: financialDisclosure, id:id }})
} else {
alert(financialDisclosure.error.fullMessage)
}
}
).catch(error => alert(error))
}
}
house.js reducer:
again, all values as expected
export default (state = [], action) => {
switch(action.type){
case "SET_HOUSE":
return action.house
//<truncated>
case "FETCH_BILLS_BY_REP":
let bills = action.payload.bills
let house = state.map(rep => {
//find rep update bills
if (rep.propublica_id === action.payload.id){
rep.bills = bills
}
return rep
}
)
return house
case "GET_REP_FINANCES":
let financialDisclosure = action.payload.financialDisclosure
let house1 = state.map(rep => {
if (rep.crp_id === action.payload.id){
rep.financialDisclosure = financialDisclosure
rep.donors = financialDisclosure.donors
}
console.log(rep.donors)
return rep
//rep now has donors under rep.donors
}
)
return house1
//house1 is being returned as the new state for house
//inside house1, rep has updated rep.donors
default:
return state;
}
}
Redux DevTools State:Diff Tab after clicking get donors button:
(truncated, just showing top 2)
house
51
donors
0{
"id": 621,
"org_name": "Buchanan, Ingersoll & Rooney",
"total": 21600,
"pacs": 0,
"indivs": 21600
}
1{
"id": 622,
"org_name": "Telacu",
"total": 18900,
"pacs": 0,
"indivs": 18900
}
MemberCard component logic for deciding whether to render bills or donors:
//format back of card
let align
let content
let space
if (this.state.showBills){
image = ""
align = "center"
space = <br/>
content =
<>
<MemberBills
member={this.props}
showBills={this.state.showBills}/>
{hideBillsButton}
</>
} else if (this.state.showDonors){
//debugger hits, this.state.showDonors = true
image = ""
align = "center"
space = <br/>
content =
<>
<MemberDonors
member={this.props} showDonors={this.state.showDonors}/>
{/*member has value, showDonors is true*/}
{hideDonorsButton}
{/*hideDonorsButton has value*/}
</>
MemberDonors render:
<div>
<br/>
<hr/>
<h4 className="center">Top Three Donors</h4>
{popUpNotice}
{donorList}
{/* donorList has correct values */}
<br/>
{donorsSource}
{/* donorsSource has correct values */}
<br/>
<br/>
</div>
I don't get any errors. Instead, I get the MembersDonors view, showing "Top Three Donors", the popUp notice ... but no donorList. However, if I refresh the page, find that particular Member again, and re-click the showDonors button, the donors appear.
I am following the same pattern I used for fetching and showing bills.
Any ideas what I'm missing?

Answer 1

You didn't show your reducer in its entirety, but I bet it's because you are mutating your state, not creating a new version.
a = {}
b = a
b.d = 10
console.log(a)
console.log(b)
console.log(a === b)
What you need is to return a new copy of your state, which can be done using Object.assign or the spread operator
a = {}
b = {...a}
b.d = 10
console.log(a)
console.log(b)
console.log(a === b)
So in short, the easiest way to fix your code is to make a copy in your return statement for all of your cases.
return {...rep}