Why isn’t useEffect triggering on Redux state updates in my Tile component?

I’m having an issue with my Tile component where the color should change on hover by dispatching a Redux action. The component uses the useEffect hook with a dependency on the Redux state (selectedTile), but even though Redux DevTools show that the state updates, the effect is never triggered.

Below is the relevant code. In the Tile component, I’m using useSelector to access the Redux state, and the action is dispatched on mouse enter. Additionally, I’ve tried using store.getState(), but it always returns the initial state. I suspect the problem might be that I’m reading from the wrong part of the Redux state tree.

Tile:

JAVASCRIPTCopied
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { setSelectedTile } from './app/slices/tileSlice';
import Player from './Player';

const baseTileStyles = {
  backgroundColor: 'lightgray',
  transition: 'ease 500ms background-color',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  height: '100%',
  width: '100%'
};

const selectedStyles = {
  ...baseTileStyles,
  backgroundColor: 'gray'
};

const getTileStyle = isSelected => {
  return isSelected ? selectedStyles : baseTileStyles;
};

export const Tile = (props) => {
  const dispatch = useDispatch();
  let tilestate = useSelector(state => state.selectedTile);

  useEffect(() => {
    console.log('selectedTile updated %d', tilestate);
  }, [tilestate]);

  return (
    <div onMouseEnter={() => dispatch(setSelectedTile(props.id))} style={getTileStyle(tilestate === props.id)}>
      <Player streamUrl={props.streamUrl} isSelected={props.isSelected} />
    </div>
  );
};

export default Tile;

Tile state reducer:

JAVASCRIPTCopied
import { createSlice } from '@reduxjs/toolkit';

export const tileSlice = createSlice({
  name: 'tile',
  initialState: {
    selectedTile: 1,
    clickedTile: null
  },
  reducers: {
    setClickedTile: (state, action) => {
      if (state.clickedTile === action.payload) {
        return { ...state, clickedTile: null };
      } else {
        return { ...state, clickedTile: action.payload, selectedTile: action.payload };
      }
    },
    setSelectedTile: (state, action) => {
      if (!state.clickedTile) {
        return { ...state, selectedTile: action.payload };
      }
    }
  }
});

export const { setClickedTile, setSelectedTile } = tileSlice.actions;

export default tileSlice.reducer;

store:

JAVASCRIPTCopied
import { configureStore } from '@reduxjs/toolkit';
import tileReducer from './slices/tileSlice';
import urlReducer from './slices/urlSlice';
import showHelpReducer from './slices/showHelpSlice';

export default configureStore({
    reducer: {
        window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
        tile: tileReducer,
        url: urlReducer,
        showHelp: showHelpReducer,
    }
});

I’d appreciate any insights into why the effect isn’t triggering and how to correctly subscribe to the updated Redux state. Also, is there a better way to observe Redux state changes within a component? Any help would be great!