Why does Redux store show my state, but react component says its undefined?

Question

I'm building an app with react-redux and am having issues with my redux store. I can see from Redux devTools that when i click on an element inside RenderPlayerTransferList the action creator is called correctly and the store updates. However, the react component itself returns undefined when trying to access this.props.currentSquad (the state object updated by the action creator which i then mapped to props). Does anyone have any idea why this is? (Note i am using redux thunk)

Relevant code:

Relvent code from main react component:

handleTransferPlayerClick=(playerId)=>{

            if (this.props.selectedPlayerFromTeamSheet){
                this.props.addPlayerToSquad(playerId)


                //add new squad into playerIconProps

                this.playerIconProps.playerNames[this.props.selectedPlayerFromTeamSheet.iconKey] = this.props.players[this.props.currentSquad.newAdditions]
                console.log(this.playerIconProps)

            }
        }

const mapStateToProps=(state)=>{
    return {players:Object.values(state.playerDatabase),
            selectedPlayerFromTFLId:state.transfers.TFLPlayerId,
            selectedPlayerFromTeamSheet:state.transfers.selectedPlayer,
            currentSquad: state.squad
    }

}

export default connect(mapStateToProps, {getPlayers, selectPlayerFromTFL, selectPlayerFromTeamSheet, addPlayerToSquad})(Transfers)

action creator

export const addPlayerToSquad = (playerId)=>{

    return (dispatch, getState) => {
        const state = getState().transfers


        const payload = {currentSquadMemberId: state.selectedPlayer.iconKey, newSquadAdditionId: playerId}

        //recives object with playerId and Iconid t
        dispatch({type:ADD_PLAYER_TO_SQUAD, payload:payload})
    }
}

Reducers

const squadDatabase = {currentSquad: {
    0: null,
    1: null,
    2:null,
    3:null,
    4:null,
    5:null,
    6:null,
    7:null,
    8:null,
    9:null,
    10:null,
    11:null,
    12:null,
    13:null,
    14:null,
    15:null
    }, newAdditions: null}

export default (state=squadDatabase, action)=>{

    switch(action.type){
        case ADD_PLAYER_TO_SQUAD:
            return {...state, currentSquad: {...state['currentSquad'], [action.payload.currentSquadMemberId]:action.payload.newSquadAdditionId}, newAdditions: action.payload.newSquadAdditionId}
        default:
            return squadDatabase
    }
}

reducers combined here...

export default combineReducers ({
    // set state object to auth
    auth: authReducer,
    form: formReducer,
    playerDatabase: playerDatabaseReducer,
    transfers: transfersReducer,
    squad: squadReducer
})

Answer 1

Without running it, it looks like you might need to change

return squadDatabase

to

return state

Otherwise it looks like that value will always be hard-coded?

And in mapStateToProps, change

currentSquad: state.squad

to

currentSquad: state.squad.currentSquad