Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

163
Views
"Dispatch is not a function" even with the parameters in connect function

So I wrote this piece of code, it's simple, but I didn't find why it doesn't work. I already have another state handled the same way, with almost the same code, which work.

// Librairies
import { useState, useEffect } from 'react'
import { connect } from 'react-redux'
import { addPlayer } from '../../Redux/actions'
// Components
import Players from './Players'

import './PlayersPage.css'

const PlayersPage = props => {

  // State
  const [newPlayerName, setNewPlayerName] = useState("")
  
  // State to props
  const { players } = props
  const handleName = e => {
    setNewPlayerName(e.target.value)
  }
  
  return (
    <div id='PlayersPage'>
    
      <h2>Noms des participants</h2>
      
      <div id="PlayersPage-pseudo">
        <label htmlFor="name">Pseudo: </label>
        <input type="text" id="PlayersPage-pseudo__name" name="UserPseudo" onChange={handleName} placeholder="Maurice" value={newPlayerName} />
        <input type="button" id="PlayersPage-pseudo__button" value="Valider" onClick={addPlayer([players, newPlayerName])} />
      </div>
      
    </div>
  )
}

const mapStateToProps = state => ({
  players: state.players
})

const mapDispatchToProps = dispatch => ({
  addPlayer: ([playerList, newPlayerData]) => dispatch(addPlayer([playerList, newPlayerData]))
})

export default connect(mapStateToProps, mapDispatchToProps)(PlayersPage)

And here's what my redux file looks like :


// Action creators
export const addPlayerRequest = () => ({
  type: ADD_PLAYER_REQUEST
})

export const addPlayerSuccess = data => ({
  type: ADD_PLAYER_SUCCESS,
  payload: data
})

export const addPlayerFailure = error => ({
  type: ADD_PLAYER_FAILURE,
  payload: error
})

/* Functions */
export const addPlayer = ([playerList, newPlayerData]) => {
  return (dispatch) => {
    // Dispatch the request status
    dispatch(addPlayerRequest())
    
    try {
      let newPlayer = {
        name: newPlayerData.name,
        color: newPlayerData.color,
        score: [0, 0, 0]
      }
      
      playerList.push(newPlayer)
      
      dispatch(addPlayerSuccess(playerList))
    }
    catch (error) {
      dispatch(addPlayerFailure(error))
    }
  }
}

I already looked around here, but most of the time answers are about a parameter missing or "useReducer", which I don't use

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!