In developing a react application with redux, I have chosen to avoid using react-redux by manually handling all dispatched events. Below is a sample code snippet.
The content of index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js"></script>
</head>
<body>
<div id="app"></div>
<script>
const appState= {
count: 0,
}
const reducer = (state, action) => {
if (typeof state === 'undefined') state = appState;
switch (action.type) {
case 'INCREMENT':
return {count: state.count+1}
case 'DECREMENT':
return {count: state.count-1}
default:
return state
}
}
var store = Redux.createStore(reducer);
const App = () => {
const [val, setVal] = React.useState(0);
handleClick = () => {
store.dispatch({type: 'INCREMENT'})
}
const unsubscribe = store.subscribe(() => {
const state = store.getState();
console.log("Listener is called")
setVal(state.count);
});
/* unsubscribe() */;
return (
<div>
<span>{val}</span>
<button onClick={handleClick}>Click</button>
</div>
);
}
ReactDOM.render(<App />, document.querySelector("#app"))
</script>
</body>
</html>
After clicking the button for the first time, it logs to the console once. However, on the second click, the log statement appears twice, indicating that the callback from the subscribe function is being called twice. How can this duplication be prevented?