Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

167
Visualizações
"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
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda