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