I have a little react redux project where have some player list in redux I can delete that and update that.. but adding new is not working ..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hockey! exercise 9.2</title>
<script src="https://unpkg.com/redux@latest/dist/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
</head>
<body>
<script type="text/babel">
const { createStore, combineReducers } = Redux;
const initialState = [];
/* Reducer Function to add, delete and Update all the Player */
function myReducer(state = initialState, action){
if(action.type === 'ADD PLAYER' ){
state.push(action.val)
}
if(action.type === 'UPDATE PLAYER' ){
for (var i = 0; i < state.length; i++) {
if (state[i].id === action.val.id) {
state[i].activeStatus = action.val.activeStatus;
console.log("Player Updated");
}
}
return state;
}
if(action.type === 'DELETE PLAYER' ){
console.log(action.val.id);
return state.filter(player => (player.id !== action.val.id));
console.log("Player Deleted");
}
return state;
}
/* Function to implement the player edit and delete*/
function playerDetails(player){
for(var i in player) {
var container = document.getElementById('allPlayers');
var btn = document.createElement('button');
btn.textContent = player[i].name;
btn.id = player[i].id
container.appendChild(btn);
btn.addEventListener("click", function(){
for(var j in player){
if(this.id == player[j].id){
var content = document.createElement('div');
var editButton = document.createElement('button');
var deleteButton = document.createElement('button');
editButton.textContent= "Change Status"
deleteButton.textContent= "Delete Player"
content.textContent = `Name: ${player[j].name}, is active: ${player[j].activeStatus}`;
container.appendChild(content);
if (player[j].activeStatus===true){
container.appendChild(editButton);
}
container.appendChild(deleteButton);
editButton.addEventListener('click', function(){
if (player[j].activeStatus===true){
store.dispatch({type: 'UPDATE PLAYER', val: {id : player[j].id, activeStatus: false}})
content.textContent = `Name: ${player[j].name}, is active: ${player[j].activeStatus}`;
console.log(store.getState());
}
})
deleteButton.addEventListener('click', function(){
store.dispatch({type: 'DELETE PLAYER', val: {id: player[j].id}});
console.log(store.getState());
var newplayer = store.getState().myReducer
playerDetails(newplayer);
})
break;
}
}
});
}
}
function add(){
}
/* Reducer Function to Get all the Player */
function getPlayer(state = {}, action){
if(action.type === 'GET PLAYER' ){
const player= action.playerData;
playerDetails(player);
}
return state;
}
const rootReducer = combineReducers({
myReducer,
getPlayer
})
const store = createStore(rootReducer)
const player1 = {
id: 1,
name : "Towfiq Omi",
activeStatus: true
}
const player2 = {
id: 2,
name : "Jesse Lingard",
activeStatus: true
}
const player3 = {
id: 3,
name : "Mercus Rashford",
activeStatus: true
}
const player4 = {
id: 4,
name : "Anthony Martial",
activeStatus: true
}
store.dispatch({type: 'ADD PLAYER', val: player1});
store.dispatch({type: 'ADD PLAYER', val: player2});
store.dispatch({type: 'ADD PLAYER', val: player3});
store.dispatch({type: 'ADD PLAYER', val: player4});
store.dispatch({type: 'GET PLAYER', playerData : store.getState().myReducer});
console.log(store.getState());
</script>
<p>Hockey players</p>
<div id="allPlayers"></div>
<br>
<div id="player"></div>
<div id="newplayer"></div>
<br>
<form id="addPlayerForm">
Name: <input type="text" id="player" name="name">
<br> Active: <input type="checkbox" name="active">
</form>
<button id="add" type="button" value="Add" onclick="add();">Add a player</button>
</body>
</html>
In the add function I want to add new data.. I have tryed to get the value by js document.get element by id but it is not working I am new to react and redux. someone help me.. Thanks in advance...
