JSFiddle - React, Tailwind, and code Playground

by ordette

HTML

<script src="https://unpkg.com/redux@latest/dist/redux.min.js"></script>
  
  <button id="add-panda">add panda</button>
  <button id="remove-panda">remove panda</button>
  
  <div id="pandas-container">
    
  </div>

JavaScript 1.7

const initialState = {
	pandas: ["yellow", "green"];
};

const colors = ["red", "blue", "yellow"];

function pandaReducer(state = initialState, action){
	switch(action.type) {
  	case: "panda/added"
    	const newPanda = colors[Math.floor(Math.random() * colors.length)];
    	return {...state, pandas: pandas.push(newPanda)};
    case: "panda/removed"
    	return {...state, pandas: pandas - 1}
    default: 
    	return state;
  }
}