Components dont rerender when redux store is updated - reactjs

Question

I have a connected top level component :
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import store from './store/store';
import { Provider } from 'react-redux';
import LifePlanner from './lifePlanner';
import { getContainer, setContainer } from './store/plannerSlice'
class App extends React.Component {
componentDidMount() {
fetch("/lp/top-layer", { mode: 'cors' }).then((response) => {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' +
response.status);
return;
}
response.json().then((data) => {
store.dispatch(setContainer({ name: "Root Container", children: data.data.containers }));
this.setState({ container: getContainer(store.getState()) })
});
}
).catch(function (err) {
console.log('Fetch Error :-S', err);
});
}
render() {
let c = this.state.container;
if (c.name) {
return <LifePlanner container={c} />
}
return <h1>Loading</h1>;
}
}
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>
,
document.getElementById('root')
);
LifePLanner then calls an ExpandedCard component, psasing the container down and then again to a ImageCard component where I put an onClick, which changes the openContainer item in the store
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import Card from '#material-ui/core/Card';
import CardActionArea from '#material-ui/core/CardActionArea';
import CardActions from '#material-ui/core/CardActions';
import CardContent from '#material-ui/core/CardContent';
import CardMedia from '#material-ui/core/CardMedia';
import Button from '#material-ui/core/Button';
import Typography from '#material-ui/core/Typography';
import { setContainer } from '../store/plannerSlice'
import store from '../store/store';
const useStyles = makeStyles({
media: { height: 250 },
});
export default function SectionCard({ id, name, image, description, children }) {
const classes = useStyles();
const handleClick = () => {
fetch(`/lp?${id}`, { mode: 'cors' }).then((response) => {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' +
response.status);
return;
}
response.json().then((data) => {
store.dispatch(setContainer({ name , children: data.data.containers }));
});
}
).catch(function (err) {
console.log('Fetch Error :-S', err);
});
}
return (
<Card className={classes.root} onClick={()=>handleClick()}>
<CardActionArea>
{image &&
<CardMedia
className={classes.media}
image={image}
title="Contemplative Reptile"
/>}
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
{name}
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
{description}
</Typography>
</CardContent>
</CardActionArea>
{(children && children.length > 0) &&
<CardActions>
<Button size="small" color="primary">
Expand (Contains {children.length} items)
</Button>
</CardActions>
}
</Card>
);
}
Heres my reducer too:
import { createSlice } from '#reduxjs/toolkit';
export const slice = createSlice({
name: 'containers',
initialState: {
openContainer: {}
},
reducers: {
setContainer: (state, action) => {
let payload = action.payload;
state.openContainer = {...payload}
},
},
});
export const getContainer = state => {
return state.containers.openContainer
};
export const { setContainer } = slice.actions;
export default slice.reducer;
None of the components get their componentWilLReceiveProps triggered or get notified of the change, but the store does get the change from the click

Answer 1

Yes, there's several issues here. The primary problems are:
You're interacting with the store directly in our components. Instead, you should be using the React-Redux APIs like connect and useSelector/useDispatch to read data from the store and dispatch actions in your components. That way they'll update properly when the store state gets updated.
You shouldn't be copying data from props to state just to render with it. Copying data from props to state is almost always the wrong approach.
A few other notes:
Conceptually, think of actions as "events that happened", not "setters". Instead of calling that reducer/action setContainer, call it something like containerDataLoaded.
You don't need to spread {...payload} in that reducer, since the object was constructed when you dispatched the action. You can simplify that line to state.openContainer = action.payload.
You might want to consider using async/await syntax instead of promise chaining.