What is the correct way to use reducer?

Question

React

Help advice. I started learning redux and got a little stuck on compiling a reducer.
Example

const initialState = {state: 'start'};

export default function stateGame(state = initialState, action) {
    
    switch (action.type){
        case 'CHANGE_GAME_STATE':
            return {state: action.payload};
        default:
            return state;
    }
}

This reducer should change the state of the game. That is, I pass the state to payload (for example, end, start, pause) and then change the state of the component. Or it would be more correct to make such a reducer

const initialState = {state: 'start'};
export default function stateGame(state = initialState, action) {
    
    switch (action.type){
        case 'GAME_START':
            return {state: 'start'};
        case 'GAME_END':
            return {state: 'end'};
        case 'GAME_PAUSE':
            return {state: 'pause'};
        default:
            return state;
    }
}

Answer 1

Everything is in the docks on this subject, albeit in a not entirely obvious place
That is: at your discretion.
I personally prefer the first option, but the second one is more "understandable".

Answer 2

Focus on the logic of your application.
If you need to register for GAME_START\GAME_... messages, then the second option is also possible. But the first one looks prettier. Unless, of course, you make several action creators for it like: startGame, endGame, pauseGame