React-Redux Maximum call stack size exceeded when adding object to list

Question

I am creating a simple game react app and when I try to add a player to my players list it seems to be creating an infinite loop and I'm not sure why. I tried to use useEffect to render the player list on initial load but that didn't help so I removed it for now to simplify. Any ideas what I could be doing differently?

App.js

import React, { useEffect } from 'react'
import {useDispatch, useSelector} from 'react-redux';
import './App.css';
import {setPlayerName, increaseCurrentPlayerId, decreaseCurrentPlayerId, addPlayerToList} from './redux/reducers/playerReducer';

function App() {
  const dispatch = useDispatch()
  const playerName = useSelector(state => state.playerName);
  const playerList = useSelector(state => state.playerList);
  const currentPlayerId = useSelector(state => state.currentPlayerId)
  

  // dispatch(addPlayerToList('Test'))
  const addPlayer = (player) => {

   dispatch(addPlayer(player))
   dispatch(setPlayerName(''))
  }

  const renderPlayerList = () => {
    if (playerList.length < 1) {
      return (
        <div>
          No Players
        </div>
      )
    } else {
      return (
        playerList.map(p => 
          <p>p.name</p>
          )
      )
    }
  }

  return (
    <div className="App">
         <input 
          type='text'
          name='playerName' 
          onChange={({ target }) => dispatch(setPlayerName(target.value))}
          required
        />
          Name<br/>
            <button type='button' 
             onClick={() => addPlayer(playerName)}
             >
            Add Player</button> <br />
        <br />
    </div>
  );
}

export default App;

playerReducer.js

export const playerNameReducer = (state = '', action) => {
    switch (action.type) {
      case 'SET_PLAYER_NAME':
        return action.data;
      default:
        return state;
    }
  };

  export const playerListReducer = (state = null, action) => {
    switch (action.type) {
      case 'ADD_PLAYER':
        return [...state, action.data];
      default:
        return state;
    }
  };

Action Creators

  export const setPlayerName = playerName => {
    return {
      type: 'SET_PLAYER_NAME',
      data: playerName,
    };
  };
  
  export const addPlayerToList = player => {
    return {
      type: 'ADD_PLAYER',
      data: player,
    };
  };
  

Answer 1

addPlayer calls itself

const addPlayer = (player) => {

   dispatch(addPlayer(player))
  }