React dispatch & useSelector doesn't update

I have part of action.js like:

export const startGame = () => {
    // set game state to ongoing game
    return { type: 'START_GAME', payload: true };
}

export const rollDices = (userIds) => {
    // roll dices
    return { type: "ROLL_DICE", payload: userIds };
}

and I use it in GameArea.js like:

import { useState } from "react";
import { useDispatch } from 'react-redux';

import { useAuth } from "../../contexts/AuthContext";
import { startGame, rollDices } from "../../services/store/action";
import { Game } from "./Game";

export const GameArea = ({ socket, userIds, host }) => {
    const [inGame, setInGame] = useState(false);

    const { currentUser } = useAuth();
    const dispatch = useDispatch();

    const handleStartGame = () => {
        // set game state to ongoing game
        setInGame(true);
        dispatch(startGame());
        dispatch(rollDices(userIds));
    }

    if(!inGame) {
        console.log(currentUser.uid);
        console.log(host);
        if(currentUser.uid === host) {
            return (
                <button
                    className="mainButton"
                    id="startButton"
                    onClick={handleStartGame}
                >Start Game</button>
            );
        }else {
            return (<p id="waitingMsg">Waiting for the host to<br/>start the game...</p>);
        }
    }else {
        return (
            <Game socket={socket} />
        );
    }
}

The GameArea.js is included in Room.js, which I think it may not be important in this question. However, when I test it with 2 accounts in different tabs, one can still join the room even if the start game button is pressed in that room, which, I think, means that the inGame is not updated as true at this point somehow.

Also if another use is in the room while the host press the start game button, the interface doesn't update as game started for him/her.

I wonder how can I fix this?

To fix this issue, you can use the useEffect hook to listen for changes in the inGame state and update the component accordingly. Here's an updated version of your GameArea component with the necessary changes:

import { useState, useEffect } from "react";
import { useDispatch } from 'react-redux';
import { useAuth } from "../../contexts/AuthContext";
import { startGame, rollDices } from "../../services/store/action";
import { Game } from "./Game";
export const GameArea = ({ socket, userIds, host }) => {
const [inGame, setInGame] = useState(false);
const { currentUser } = useAuth();
const dispatch = useDispatch();
const handleStartGame = () => {
// set game state to ongoing game
setInGame(true);
dispatch(startGame());
dispatch(rollDices(userIds));
}
useEffect(() => {
// Listen for changes in the inGame state
// and update the component accordingly
if (inGame) {
// Game has started, do something
} else {
// Game has not started, do something else
}
}, [inGame]);
if (!inGame) {
console.log(currentUser.uid);
console.log(host);
if (currentUser.uid === host) {
return (
<button
className="mainButton"
id="startButton"
onClick={handleStartGame}
>
Start Game
</button>
);
} else {
return (
<p id="waitingMsg">
Waiting for the host to<br />start the game...
</p>
);
}
} else {
return <Game socket={socket} />;
}
}

@Sumith in the comment is correct that I need to pass the info to the server side so that other users can have this info to decide if they can join the room