Build a counter application that will randomly increment or decrement the initial specified counter 10 times when the application is run on the browser. However, because it happens fast, the user won't be able to notice that the state has actually changed 10 times since the application started. We will use the Redux DevTools Extension to navigate and analyze how the state has changed over time.
First, build a small ExpressJS server application that will serve the client application and the Redux library installed in node_modules:
- Create a new file named time-travel.js
- Add the following code:
const express = require('express')
const path = require('path')
const app = express()
app.use('/lib', express.static(
path.join(__dirname, 'node_modules', 'redux', 'dist')
))
app.get('/', (req, res) => {
res.sendFile(path.join(
__dirname,
'time-travel.html',
))
})
app.listen(
1337,
() => console.log('Web Server running on port 1337'),
)
- Save the file
Next, build your counter, Redux powered application, with time travel capabilities:
- Create a new file named time-travel.html
- Add the following HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Time travel</title>
<script
src="https://unpkg.com/@babel/standalone/babel.min.js">
</script>
<script src="/lib/redux.js"></script>
</head>
<body>
<h1>Counter: <span id="counter"></span></h1>
<script type="text/babel">
// Add JavaScript Code here
</script>
</body>
</html>
- Inside the script tag add the JavaScript code that follows the next steps, starting from step 4
- Keep a reference to the span HTML element that will display the current value of the counter whenever the state changes:
const counterElem = document.querySelector('#counter')
- Get the createStore method and bindActionCreators method from the Redux library:
const {
createStore,
bindActionCreators,
} = Redux
- Define two action types:
const TYPE = {
INC_COUNTER: 'INC_COUNTER',
DEC_COUNTER: 'DEC_COUNTER',
}
- Define two action creators:
const actions = {
incCounter: (by) => ({ type: TYPE.INC_COUNTER, by }),
decCounter: (by) => ({ type: TYPE.DEC_COUNTER, by }),
}
- Define a reducer function that will transform the state according to the given action type:
const reducer = (state = { value: 5 }, action) => {
switch (action.type) {
case TYPE.INC_COUNTER:
return { value: state.value + action.by }
case TYPE.DEC_COUNTER:
return { value: state.value - action.by }
default:
return state
}
}
- Create a new store providing a store enhancer function that will be available on the window object when the Redux DevTools extension is installed:
const store = createStore(
reducer,
(
window.__REDUX_DEVTOOLS_EXTENSION__ &&
window.__REDUX_DEVTOOLS_EXTENSION__()
),
)
- Bind the action creators to the dispatch method of the store:
const {
incCounter,
decCounter,
} = bindActionCreators(actions, store.dispatch)
- Subscribe a listener function to the store that will update the span HTML element whenever the state changes:
store.subscribe(() => {
const state = store.getState()
counterElem.textContent = state.value
})
- Let's create a for loop that will update increment or decrement the counter randomly 10 times when the application is run:
for (let i = 0; i < 10; i++) {
const incORdec = (Math.random() * 10) > 5
if (incORdec) incCounter(2)
else decCounter(1)
}
- Save the file