I have a simple counter application and I manage this application state with Redux. Also, I have some requirements for this application.
Clicking the Add counter button will add a new counter.
Each counter will have separate state management.
Each counter will have increment and decrement buttons.
The value variable of the increment and decrement buttons should be increased. (like sometimes 1 or sometimes 5 this way)
Clicking on the Reset button will reset all counters.
At the very first time there will be a counter as the initial state and its initial value will be 0
Here is my HTML code...
<div class="w-screen h-screen p-10 bg-gray-100 text-slate-700">
<!-- header -->
<h1 class="max-w-md mx-auto text-center text-2xl font-bold">
Simple Counter Application
</h1>
<!-- counters -->
<div id="counter-container" class="max-w-md mx-auto mt-10 space-y-5">
<div class="p-4 h-auto flex flex-col items-center justify-center space-y-5 bg-white rounded shadow">
<div id="counter" class="text-2xl font-semibold"></div>
<div class="flex space-x-3">
<button id="increment" class="bg-indigo-400 text-white px-3 py-2 rounded shadow">
Increment
</button>
<button id="decrement" class="bg-red-400 text-white px-3 py-2 rounded shadow">
Decrement
</button>
</div>
</div>
<div class="h-auto bg-transparent flex justify-end">
<div class="flex space-x-3">
<button id="add-counter" class="bg-indigo-400 text-white px-3 py-2 rounded shadow">
+ Add Counter
</button>
<button id="reset" class="bg-red-400 text-white px-3 py-2 rounded shadow">
Reset
</button>
</div>
</div>
</div>
</div>
And my js code is here
// select dom elements
const counterEl = document.getElementById('counter');
const incrementEl = document.getElementById('increment');
const decrementEl = document.getElementById('decrement');
const addCounterEl = document.getElementById('add-counter');
const resetEl = document.getElementById('reset');
// action identifiers
const INCREMENT = 'increment';
const DECREMENT = 'decrement';
const RESET = 'reset';
// action creators
const increment = (value) => {
return {
type: INCREMENT,
payload: value,
};
};
const decrement = (value) => {
return {
type: DECREMENT,
payload: value,
};
};
const reset = () => {
return {
type: RESET,
};
};
I think my initial state needs to change and need to declare with an object in the array.
// initial state
const initialState = {
value: 0,
};
// create reducer function
function counterReducer(state = initialState, action) {
if (action.type === INCREMENT) {
return {
...state,
value: state.value + action.payload,
};
} else if (action.type === DECREMENT) {
return {
...state,
value: state.value - action.payload,
};
} else if (action.type === RESET) {
return {
...state,
value: 0,
};
} else {
return state;
}
}
// create store
const store = Redux.createStore(counterReducer);
const render = () => {
const state = store.getState();
counterEl.innerText = state.value.toString();
};
// update UI initially
render();
store.subscribe(render);
// button click listeners
incrementEl.addEventListener('click', () => {
store.dispatch(increment(5));
});
decrementEl.addEventListener('click', () => {
store.dispatch(decrement(2));
});
// it's my add counter button
addCounterEl.addEventListener('click', () => {
// add counter code
});
resetEl.addEventListener('click', () => {
store.dispatch(reset());
});
