CODEWITHSUNDEEP
javascriptreactjsredux
jansyb04
jansyb04

Reputation: 161

Change in Redux state object value not re-rendering

I have an object in my store that I can being updated when actions are dispatched. But I'm not seeing the updated value for totalDevices displayed on the page. It stays with the original render. What am I doing wrong?

State

{
  deviceCount: {
    'projectId:ed4b4e40-d4e2-4540-8359-c002526f2793': {
      totalDevices: 1,
      error: {}
    },
    'projectId:a6293167-ade2-4e22-98f0-70260fcee7f7': {
      totalDevices: 0,
      error: {}
    }
  }
}

Component

  const selectDeviceCount = useSelector((state) => state.deviceCount);
  const [currDeviceCount, setCurrDeviceCount] = useState(selectDeviceCount); // Using to display value of totalDevices for each item in object

  useEffect(() => {
    loadDeviceCountByProjectID({ projectId });
  }, [loadDeviceCountByProjectID]);

  useEffect(() => {  // Should this hook trigger a rerender on currDeviceCount? 
    setCurrDeviceCount(
      selectDeviceCount
    );
  }, [selectDeviceCount]);

  return (
    <ListItem
      className={variation === 'block' ? classes.listItem : ''}
      key={projectId}
      button
      component={Link}
      to={`/${organizationName}/${name}?per_page=10&page=1`}
    >
      <ListItemText>
            {name}
          </span>
        }
      />
      <ListItemAvatar className={classes.devicesAvatar}>
        <>
          <TabletAndroidIcon className={classes.deviceIcon} />
          <Typography variant="caption">
            // Conditional rendering to prevent errors when state is undefined on first load
            {selectDeviceCount.length > 0
              ? selectDeviceCount[`projectId:${projectId}`]?.totalDevices
              : 0}
          </Typography>
        </>
      </ListItemAvatar>
    </ListItem>
  );

Upvotes: 0

Views: 54

Answers (1)

Arky Asmal
Arky Asmal

Reputation: 1331

Your use of hooks is fine, and your state should be changing. But you're measuring selectDeviceCount.length in your render, but selectDeviceCount is an object, and therefore has a length of 0. If you want to measure the number of keys inside the selectDeviceCount object, do Object.keys(selectDeviceCount).length

To mitigate selectDeviceCount being undefined, simply initialize the state to an empty object by doing useState({})

Below is the area where your code has the issue.

<Typography variant="caption">
            // Conditional rendering to prevent errors when state is undefined on first load
            {Object.keys(selectDeviceCount).length > 0
              ? selectDeviceCount[`projectId:${projectId}`]?.totalDevices
              : 0}
          </Typography>

Upvotes: 1

Related Questions