![\"react-app\"](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/web-7-react-redux-timers-app@549335c706f2ac39b491d59065d65320e7abb511/P01-Getting-Started/assets/react-app.png\" "\\"\\"")
\n The goal of the project is to create a web app that stores a list of timers.\nTimers will keep track of elapsed time. It could be used to track time for billing clients, scientific processes, or other uses. Through building this app, you will learn how to use React to manage views, and Redux to manage application state.
While not a complete product, this app has many features that allow you to learn more about JavaScript, React and Redux. It also provides an opportunity to learn more about vanilla JavaScript and takes a close look at the Date Object.
The app created in this tutorial could be the basis of a real world\nproduct like Toggl.com!
"},{"id":"T0E6OlNlY3Rpb24tMTE0NTc=","title":"Why is this important?","htmlContent":"This gives practice in building web apps using React and getting familiar with the JSX syntax. As you go throughout this course, we'll be building more complex apps, so it's good to have the fundamentals down, which you'll learn in this tutorial!
"},{"id":"T0E6OlNlY3Rpb24tMTE0NTg=","title":"Prerequisites","htmlContent":"To follow this tutorial, you should have...
By the end of this tutorial, you should be able to...
Much like we've done in earlier tutorials, make sure you're committing your code as you complete milestones. At a minimum, you should make a commit whenever the tutorial prompts you.
"},{"id":"T0E6OlNlY3Rpb24tMTE0NjI=","title":"Set Up Git/GitHub","htmlContent":"Set up your repo!
\nMake your first commit
\n$ git init\n$ git add .\n$ git commit -m 'project init'\n\nNow go to GitHub and create a public repository, and now associate it as a remote for your local git project and then push to it.
\nPush it!
\n$ git remote add origin GITHUB-REPO-URL\n$ git push origin main -u\n\n
The goal of this section is to install the tools you will need to complete the\ntutorial.
"},{"id":"T0E6OlNlY3Rpb24tMTE0NjQ=","title":"Editor","htmlContent":"You will need a code editor of some kind. I will recommend using VS Code or Atom.
Download one of the above editors (or another of your choice) to use in the tutorial
\nNode package Manager is a tool for managing file dependancies.
Follow the instructions here and install the version for your computer system.
\nThe first step is to create a boiler plate react app. React provides\na command line tool: Create React App that will do this for you.
For more background on the Create React App tool, you can read about it here.
Run the commands below to set up your boiler plate react app:
\n$ npx create-react-app tmrz-app\n$ cd tmrz-app\n$ yarn start\n\nNote: The first command above may take a few seconds to install all of file\ndependancies. The last command may take a few seconds to start the app for the first time.
When the the above commands are complete, a tab pointed to localhost should open in your browser and it should look like the below:
The project is now running on localhost:3000. This local server is\nfor development.
Editing files in the project should trigger the local server to update.\nIn this way you can see the latest changes immediately in the browser.
"},{"id":"T0E6OlNlY3Rpb24tMTE0Njc=","title":"Tour the React App source code","htmlContent":"The boilerplate project contains a few files that are arranged in\nfolders:
src: You'll do your work in the src folder. This folder contains\nall of the React Components.\n\nindex.js: defines ReactDOM.render(). This loads and displays the App component. This is the entry point for a react app. You won't need to edit this file.\napp.js: contains the root component for the app. At the moment this file defines everything you see when you run the default app.You will break your app into components and import these components into the App component. Each new component will be defined in a new file in the src directory.
Redux is a tool for managing application state. Redux is based on the Flux pattern developed by Facebook, which imposes a unidirectional data flow.
Redux is a JavaScript implementation of Flux, and while Redux stands on it's own, it is often used with React.
This happens so often, that there now exists a library that integrates Redux with React called React-Redux.
Import Redux and React-Redux.
Run the following to import redux and react-redux:
\n$ npm i --save redux\n$ npm i --save react-redux\n\n
$ git add .\n$ git commit -m 'create react app with redux and react-redux'\n$ git push\n\nThe app will create and store Objects that define a timer. Timer objects will have the following properties that will define it:
You can add more properties to expand the functionality of the app. For example you might have billable, and rate if the app was used for business.
JavaScript only has one Object type. It has many ways to create objects. For this tutorial we will be using the class syntax. This will follow the same coding style used for creating React components.
You can define a class using the class keyword. Class names by convention\nalways start with an uppercase letter. You can initialize the properties of a class in it's constructor function.
In your src folder, create a Timer.js file and write the Timer class with the following properties:
class Timer {\n // The name property is passed into the constructor and the class is initialized.\n constructor(name) {\n this.name = name;\n this.time = 0;\n this.isRunning = false;\n }\n}\n\n
export default Timer;\n```
Below is an example on how to create an instance of Timer:
var myTimer = new Timer('Workout');\n
Great work, this is just the beginning of defining class objects to utilize in an OOP paradigm! We'll build upon this throughout the tutorial.
$ git add .\n$ git commit -m 'added Timer class'\n$ git push\n\nThe Flux pattern and Redux require that\nyou define actions that describe how data can be modified. A few key points around actions:
const with string value.But wait, we just covered actions, what's an action creator? An action creator is a function that returns an object with a type, and a payload when a value needs to accompany the action.
For example, a SELECT_BOOK action creator might look like this:
export const selectBook = (index) => {\n return {\n type: SELECT_BOOK,\n payload: { index }\n }\n}\n"},{"id":"T0E6OlNlY3Rpb24tMTE0NzQ=","title":"Timer Actions","htmlContent":"
Let's start by defining the actions before making the app!
The app needs to do the following things with timers:
First we need a place to store all these actions:
Create the folder src/actions, and then add this file: src/actions/index.js.
All actions are going to be defined within src/actions/index.js.
Let's build each of these out, action by action:
"},{"id":"T0E6OlNlY3Rpb24tMTE0NzU=","title":"Add Timer","htmlContent":"ADD_TIMER - Creating a timer will add a new timer object to an array of timer objects held by the store.
Add the following to src/actions/index.js:
export const NEW_TIMER = 'NEW_TIMER'\nexport const addTimer = (name) => {\n return {\n type: NEW_TIMER,\n payload: { name }\n }\n}\n\n
TOGGLE_TIMER - Starts or stops a timer. This requires the\nindex of the timer.
Add the following to src/actions/index.js:
export const TOGGLE_TIMER = 'TOGGLE_TIMER'\nexport const toggleTimer = (index) => {\n return {\n type: TOGGLE_TIMER,\n payload: { index }\n }\n}\n\n
SELECT_TIMER - Selects a timer. Selecting a timer will\ndisplay details about that timer. This requires the index\nof the timer.
Add the following to src/actions/index.js:
export const SELECT_TIMER = 'SELECT_TIMER'\nexport const selectTimer = (index) => {\n return {\n type: SELECT_TIMER,\n payload: { index }\n }\n}\n\n
These action names are all stored as strings. You'll be referencing them in more than one place in your app. By defining the vairable the value appears only in a single location and can easily be changed. Exporting the variable from this file allows the code editor to catch errors and prevents us from making spelling mistakes.
We're now well on our way to building React components and managing state using the Flux pattern, but we've got some work to do before we're finished.
"},{"id":"T0E6OlNlY3Rpb24tMTE0Nzk=","title":"Now Commit","htmlContent":"$ git add .\n$ git commit -m 'added Timer actions'\n$ git push\n\nNext we need to build a reducer to handle changes in state. Before we build them, let's briefly revisit what application state will look like.
"},{"id":"T0E6OlNlY3Rpb24tMTE0ODE=","title":"Store Review","htmlContent":"The store is a JavaScript Object with properties and values.
You could say each property on the store object is a 'pieces' of your overall application state.
For this app we will put an array of timers on one piece of state, and the index of the selected timer on another piece of state.
With this arrangement the store would look like this:
{\n timers: [ Timer1, Timer2, Timer3, ... ],\n selectedTimer: 0\n}\n
Values are assigned to each piece of state through a reducer. A reducer is a function that is responsible for making chnages to state.
You'll need a reducer for each piece of state. Above we've defined two properties: timers and selectedTimer so we need a reducer for each.
First create a folder to hold the reducers: src/reducers
The selectedTimer Reducer will need to set the selectedTimer to the\nvalue passed in the payload of the SELECT_TIMER action.
Create a new file src/reducers/selectedTimerReducer.js with the following code:
// Import the SELECT_TIMER action\nimport { SELECT_TIMER } from '../actions';\n\nconst selectedTimerReducer = (state = null, action) => {\n switch (action.type) {\n // On the SELECT_TIMER action, set the selectedTimer to the value passed in the payload\n case SELECT_TIMER:\n return state = action.payload.index;\n\n default:\n return state;\n }\n}\n\nexport default selectedTimerReducer;\n\n
The Timers Reducer has a bit more work to get up and running, since it's responsible for managing the array of Timer objects. Before we get started though, it is critical to understand the difference between passing by reference vs. value.
Primitives (strings, numbers, booleans) are always stored as values, and when assigned, those values are copied (a new value is created).
Objects, Arrays, and Functions are not copied when assigned to variables. Instead a reference to the original is assigned. When assigning an array to another variable both variables will reference the same array!
Check out the example here to see this with real code!
Understanding this is important to understanding JavaScript and Redux.
Redux requires a reducer to return a new object. If a reducer returns the same object, Redux will not see a change and will not update views.
Why? Redux needs to see that the object has been changed. Objects are passed by reference, modifying an object doesn't create a new reference.
\nYour reducers must return a new copy of state if state is an Object or Array.
Many array methods mutate the original array. Some methods create a copy. You'll want to use these methods in your reducers.
Copy an array with the spread operator ...:
const array = [1,2,4]\nconst newArray = [...array] \n
Copy an array with slice()
const array = [1,2,4]\nconst newArray = array.slice()\n
Copy your array and add a new item with the spread operator:
// Creates a new array\nvar newState = [...state, newItem];\n
Add a new item by copying the array with Array.slice() then adding a new item.
// Creates a copy of state\nvar newState = state.slice();\nnewState.push(newItem);\n
Inserts a new item at index.
var newState = [...state.slice(0, index), newItem, ...state.slice(index)];\n
If these topics are new for you, try some of these practice problems:
Remember if you are modifying an object in an array you need to create a copy of that object!
Imagine state is an array of Objects with name and count {name:\"\", count:0}. You want to increase count for the object at index.
var newState = state.map((item, i) => {\n if (i === index) {\n // Returns a new object with the values of item, and overwrites count with new value\n return {...item, count: item.count + 1};\n } \n return item;\n})\n
If these topics are new for you, try some of these practice problems:
Alright, now we're ready to define a reducer for timers.
Remember: Redux requires a reducer to return a new object.
Create a new file: src/reducers/timersReducer.js with the following code:
// Import all of our actions\nimport { NEW_TIMER, TOGGLE_TIMER } from '../actions';\nimport Timer from '../Timer'\n\nconst timersReducer = (state = [], action) => {\n switch (action.type) {\n case NEW_TIMER:\n // Add a new timer, return a copy of state\n const name = action.payload.name ? action.payload.name : `Timer ${state.length}`\n return [...state, new Timer(name)]\n\n case TOGGLE_TIMER:\n // Invert the isRunning property of timer at index, return a copy of state\n const newState = state.map((timer, index) => {\n if (action.payload.index === index) {\n return {...timer, isRunning: !timer.isRunning}\n }\n return timer\n })\n return newState\n\n default:\n return state;\n }\n}\n\nexport default timersReducer;\n\n
While you have a reducer for each piece of state you need a root reducer to bring them all together. combineReducers is used for this.
Add a file src/reducers/index.js and add the following:
import { combineReducers } from 'redux';\n\nimport timerReducer from './timersReducer';\nimport selectedTimerReducer from './selectedTimerReducer';\n\nexport default combineReducers({\n timers: timerReducer, // array\n selectedTimer: selectedTimerReducer, // int/number\n});\n\n
Import the reducers at the top of App.js. You also need createStore from redux and Provider from react-redux.
Add the following to the top of App.js:
...\n\nimport { createStore } from 'redux';\nimport { Provider } from 'react-redux';\n\nimport reducers from './reducers';\n\n
Then create the store below all the import statements
\n...\nconst store = createStore(reducers);\n\n
Finally, define the Provider component, which makes the Redux store available to all nested components.
Update your App component in App.js:
function App() {\n return (\n <Provider store={store}>\n <h1>TMRZ</h1>\n </Provider>\n );\n}\n\n
Your app should display the the heading: TMRZ. This doesn't look like much but you've actually done a lot laying down redux infastructure. The Actions and Reducers are ready to manage state in this application.
Building out our reducers gave us some good practice with getting further acquainted with the Flux pattern! And now we're ready to move on and build out our React Components!
$ git add .\n$ git commit -m 'added Timer reducers'\n$ git push\n\nSo far we have been working on getting Redux and React up and\nrunning and no work has gone into components, which is the heart of React!
With actions and reducers in place you can now create\ncontainers/components that display state from the store and\nsend actions to update the store. Let's get those working!
new-timer componentThe first component we'll build is for creating new timers. The new timer component should have the following:
The above field that will allow users to input a name is a controlled component. This is when \"the React component that renders [an input] also controls what happens in that form on subsequent user input.\"
\n\nYou can read more about controlled components here
\nKeep in mind that we won't see timers until the Timer list component is created, which will be built in the next chapter.
Create a new folder in src called components. Now within this folder, create a NewTimer.js file which will house our new-timer component
Fill in /src/components/NewTimer.js with the following starter code
import React, { useState } from 'react'\nimport { useDispatch } from 'react-redux'\n\n// We need to import our action to add a new timer\nimport { addTimer } from '../actions'\n\nexport default function NewTimer() {\n const [ name, setName ] = useState('')\n const dispatch = useDispatch()\n\n return (\n <div>\n\n
</div>\n)\n
}\n```
You now have a basic NewTimer component structure, but we have no idea how to render it! Remember we want to have the following:
Let's build that out in the render function:
Fill in the render method in /src/components/NewTimer.js, as well as adding a few other ancillary methods and an export statement:
export default function NewTimer() {\n const [ name, setName ] = useState('')\n const dispatch = useDispatch()\n\n return (\n <div>\n <input\n type='text'\n placeholder=\"New Timer Name\"\n name=\"name\"\n value={name}\n onChange={(e) => setName(e.target.value)}/>\n <button\n onClick={() => dispatch(addTimer(name))}\n >Save</button>\n </div>\n )\n}\n\n
First React component in the bag! Great work on building a react component using JSX syntax, as well as getting more practice managing application state. But we can't stop here, let's build another component!
"},{"id":"T0E6OlNlY3Rpb24tMTE0OTA=","title":"Now Commit","htmlContent":"$ git add .\n$ git commit -m 'added new timer input'\n$ git push\n\nlist-timers component that will house a list of timerstimer-view component to describe what a timer looks liketimer-view, allow for display of a name, time, and start/stop buttonThe list of timers will display all of the timers you have created. Each timer displayed in the list will need to display the following:
The Timer list itself should display the following:
Create a new file src/ListTimers.js with the following boilerplate code:
import React from 'react'\nimport { useSelector } from 'react-redux'\nimport { selectTimer } from '../actions'\n\nexport default function ListTimers() {\n\n return (\n <div>\n {/* render timers here */}\n </div>\n )\n}\n\n
While this implementation doesn't render the timers (yet), it does set up the basic elements required for container/component to interface with Redux!
"},{"id":"T0E6OlNlY3Rpb24tMTE0OTM=","title":"The Timer list","htmlContent":"To render the list of timers you need to get the timers array from the store. To do this use: useSelector(). Pass this method a function that receives state and returns the piece of state you need.
Add the code below. This should get the timers piece of your state, and then map it to a JSX block that will be displayed by the component.
export default function ListTimers() {\n const timers = useSelector(state => state.timers)\n\n return (\n <div>\n {timers.map((timer, i) => {\n // Here the render method maps `this.props.timers` to:\n return (\n <div>\n <h2>{timer.name}</h2>\n <h1>{timer.time}</h1>\n <button>Start</button>\n </div>\n )\n })}\n </div>\n )\n}\n
The timer list could be implemented as a single component. This simple approach works but doesn't use React's Component architecture to your advantage.
A better approach is to make a component from the block inside map:
<div>\n <h2>{timer.name}</h2>\n <h1>{timer.time}</h1>\n <button>Start</button>\n</div>\n\n
To make it completely functional you will have to\nadd styles, possibly some more markup, the time will need to be formatted, and the button will require some logic and a click handler. What does this scream to us?
\n\nBLOAT!!
\n\nWith these required additions this component would become far less manageable. In addition there would be a lot of logic, for things like formatting time, that is not core goal of this component, which is displaying a list of timers.
\nIt's always important to break components down into smaller, more easily manageable parts as opposed to inflating them unnecessarily.
"},{"id":"T0E6OlNlY3Rpb24tMTE0OTQ=","title":"Timer View Component","htmlContent":"A better approach is to create a component that is responsible for displaying a single timer. Let's build this out first before we finish up the Timer List.
Create a file: src/TimerView.js with the following code:
import React, { } from 'react'\nimport { useDispatch } from 'react-redux'\n// Import our toggleTimer action\nimport { toggleTimer } from '../actions'\n\nexport default function TimerView(props) {\n // Extract these specific props to use in the component\n const { index, timer } = props\n const dispatch = useDispatch()\n\n return (\n <div>\n <h2>{timer.name}</h2>\n <h1>{timer.time}</h1>\n <button\n onClick={() => dispatch(toggleTimer(index))}\n >\n {timer.isRunning ? \"Stop\" : \"Start\"}\n </button>\n </div>\n )\n}\n\n
Notice: TimerView takes a Timer object as a prop: timer={timer}. The name and time properties could then be accessed as: props.timer.name and props.timer.time within TimerView. However, we'll introduce a shorthand to more easily access these properties so we don't need a long string every time.
From here, the render method in src/components/ListTimers.js can be simplified!
Update the imports and fill in the render method for src/components/ListTimers.js with the following:
import TimerView from './TimerView'\n...\nexport default function ListTimers() {\n const timers = useSelector(state => state.timers)\n\n return (\n <div>\n {timers.map((timer, i) => {\n // Here the render method maps `this.props.timers` to:\n return (\n <TimerView \n key={`timer-${i}`} \n timer={timer} \n index={i} \n />\n )\n })}\n </div>\n )\n}\n\n
At this stage, we can now create timers and have them appear, as well as press a start/stop button. Let's update App.js to actually show our timers so we have something to look at!
Update App.js to import our NewTimer and ListTimers components and then put them in the Provider
import React from 'react';\nimport './App.css';\nimport { createStore } from 'redux';\nimport { Provider } from 'react-redux';\nimport reducers from './reducers';\n// import new components\nimport NewTimer from './components/NewTimer'\nimport ListTimers from './components/ListTimers'\n\nconst store = createStore(reducers);\n\nfunction App() {\n return (\n <Provider store={store}>\n <h1>TMRZ</h1>\n {/* Display the new components */}\n <NewTimer />\n <ListTimers />\n </Provider>\n );\n}\n\nexport default App;\n\n
Currently the app is working but needs some styles.
A common pattern for styling react Components is to create a stylesheet for each component and import those styles into each component.
This method has it's pros and cons.
Pros: It makes the components portable. You can copy the styles .css file along with the component .js file together and move them into a new project.
Cons: Using a .css for each component you will have lots of css styles floating around making it easy to have duplicate class names or other selectors.
You will use this strategy for this project. To address the concerns above you'll assign the root element of each component a css class name that matches the component name.
Open App.css and delete all of the styles. Add these styles:
.App {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n
Open App.js and import thise style sheet by adding this to the top of the page:
import './App.css';\n
Next add a root element that will get the css class name: App
<Provider store={store}>\n <div className=\"App\">\n <h1>TMRZ</h1>\n ...\n </div>\n</Provider>\n
With this in place the style should arrange all the children of div.App in a column centered in the page.
The NewTimer component has container with two children. Give the container element a class name that matches the component name:
export default function NewTimer() {\n ...\n return (\n <div className=\"NewTimer\">\n ...\n </div>\n )\n}\n
Make a new file: NewTimer.css
.NewTimer {\n display: flex;\n justify-content: center;\n}\n\n.NewTimer > input {\n font-size: 1rem;\n padding: 0.25rem 0.5rem;\n border-radius: 0.5rem 0 0 0.5rem;\n border: 1px solid;\n margin: 0;\n}\n\n.NewTimer > button {\n font-size: 1rem;\n padding: 0.25rem 0.5rem;\n border-radius: 0 0.5rem 0.5rem 0;\n border: 1px solid #000;\n margin: 0;\n background-color: #000;\n color: #fff;\n font-weight: bold;\n}\n
Notice we used the child selector (>) here. This keeps these styles scoped to the parent class name on the parent element.
Import the styles at the top of NewTimer.js
import './NewTimer.css'\n
The TimerView component has a three child elements: Name, Time, and Start/Stop button. Let's arrange these in a row with the time in the center and the other elements at either end of the row.
Open TimerView.js and add a class name on the root element.
export default function TimerView(props) {\n ...\n return (\n <div className=\"TimerView\">\n ...\n </div>\n )\n}\n
Make a new CSS file: TimerView.css
.TimerView {\n width: 320px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: baseline;\n}\n\n.TimerView > h1 {\n flex:1;\n margin: 1rem;\n text-align: left;\n font-variant-numeric: tabular-nums;\n}\n\n.TimerView > h2 {\n flex: 1;\n}\n\n.TimerView > button {\n padding: 0.25rem 0.5rem;\n border-radius: 0.5rem;\n border: 1px solid #000;\n background-color: #000;\n color: #fff;\n font-size: 1rem;\n font-weight: bold;\n width: 4rem;\n}\n
Here you styled each of the three children: h1, h2, and button of the parent div.TimerView.
Import your style sheet at the top of TimerView.js
import './TimerView.css'\n"},{"id":"T0E6OlNlY3Rpb24tMTE0OTY=","title":"Product So far","htmlContent":"
Now go to your browser, and you should see something like the following when you load the page. It's not pretty (we'll fix that later) but Make sure you can create a timer and that it looks like the below screenshots:
Home Screen (tiny new timer button at the bottom)\n\n ![\"home\"](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/web-7-react-redux-timers-app@549335c706f2ac39b491d59065d65320e7abb511/P06-List-Timers/assets/home.png\" "\\"\\"")
\n
Creating a new timer named \"foo\"\n\n ![\"new](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/web-7-react-redux-timers-app@549335c706f2ac39b491d59065d65320e7abb511/P06-List-Timers/assets/new-timer.png\" "\\"\\"")
\n
Currently our timers won't start when we press them, but the start/stop button should still change text when you press it
Make sure your star/stop button changes text when you press it. If it doesn't go back through this chapter and make sure everything matches up. Now is a great time to practice your debugging skills!
\nWhew, that was a lot, but we've now built another two React components with JSX syntax, and also got to see data/state be passed using the Flux pattern! Now if only our timers actually...timed anything! We'll fix that in the next chapter but first...
"},{"id":"T0E6OlNlY3Rpb24tMTE0OTc=","title":"Now Commit","htmlContent":"$ git add .\n$ git commit -m 'added list of timers'\n$ git push\n\nWhat if we want to delete a timer? Add functionality so that we can delete a timer from the list.
\nSo we have everything displaying, but the timers still aren't running. It's about time we fixed that and actually gave the start/stop buttons something to do!
Currently we have all these actions associated with timers, but nothing that tells them how to update the time on the views. We need to build out an update action so that the timers can make sure to regularly update their time. This action Object only needs a type, and the payload should be the number of milliseconds since the last update.
In /src/actions/index.js, add the following UPDATE action, and action creator:
...\nexport const UPDATE = \"UPDATE\"\n\nexport const update = (deltaTime) => {\n return {\n type: UPDATE,\n payload: { deltaTime }\n }\n}\n\n...\n\n
Wow hang on, what's deltaTime? You're going to be using deltaTime to help calculate what time the timer should be displaying.
The CPU is in charge of handling a lot of stuff, so while keeping time sounds simple, it's hard for the CPU to do it accurately given all the other processes it has on its plate.
This means something like the following code won't keep an accurate sense of time:
var secs = 0\nsetInterval(() => {\n secs += 1\n console.log(secs)\n // do something every ~second\n}, 1000)\n
You can actually see this happen yourself in this example.
The setInterval method provides a callback that repeats forever\nafter a designated interval:\nsetInterval(callback, milliseconds)
If you wanted to just do a one time callback, you would use setTimeOut, which takes the same parameters
A better method is to keep track of the time that has elapsed\nin milliseconds by getting the difference in in time between\ncallbacks from setInterval. This called delta time.
The method below gives a very accurate representation\nof time:
var time = 0\nvar lastUpdate = Date.now()\n\nsetInterval(() => {\n var now = Date.now()\n var dt = now - lastUpdate\n time += dt\n lastUpdate = now\n console.log(count, dt, time)\n}, 1000)\n
Here time is calculated as such:
Date.now())now - lastUpdate). This is delta time and is the number of milliseconds since the last update.time += dt)lastUpdated to be the current time (lastUpdate = now)The Date object creates a Date instance which represents a single moment in time. Dates are stored as an integer value equal to the number of seconds since January 1, 1970 (the Unix Epoch).
The Date Object provides a long list of methods that allow you to use for wide range purposes.
\nArmed with this new knowledge on timing, intervals, and dates in JavaScript, let's update our timers-reducer.js file to handle our new Update action:
Update src/reducers/timersReducer.js to handle the new actions 'UPDATE' action.
Import the UPDATE at the top:
import { NEW_TIMER, TOGGLE_TIMER, UPDATE } from '../actions';\n\n
Then add another case to your switch statement:
\nconst timerReducer = (state = [], action) => {\n switch (action.type) {\n\n case UPDATE:\n return state.map((timer) => {\n if (timer.isRunning) {\n timer = { ...timer, time: timer.time += action.payload.deltaTime }\n }\n return timer\n })\n ...\n }\n}\n\n
The above creates a new array of timers. For all timers where the isRunning property is true it makes a new timer Object where time is the old time plus the deltaTime on the payload.
In some cases (such as our current one) we will want to dispatch actions to the store without sending them from a view. To do this, you need to update the store using a setInterval callback.
Within our callback, we should call store.dispatch(action), where action is an action object with a type. Following best practices, we should call an action creator to generate the action Object! Good thing we just built that!
Update App.js to update the timers every 50ms:
...\n// Import the update action for use\nimport { update } from './actions'\n...\n\nconst store = createStore(reducers);\n\nlet lastUpdateTime = Date.now()\nsetInterval(() => {\n const now = Date.now()\n const deltaTime = now - lastUpdateTime\n lastUpdateTime = now\n store.dispatch(update(deltaTime))\n}, 50)\n\n...\n\n
Open your browser and see if the timers update their time when you click Start. Do they stop when you press Stop?
Great work so far, but something is still missing...
"},{"id":"T0E6OlNlY3Rpb24tMTE1MDQ=","title":"Formatting Time","htmlContent":"Timers can be hard for people to read if they're only displaying the time in milliseconds. Let's fix this so that they show in a proper hour:minute:seconds.milliseconds format:
Create a new folder in /src called /utils. Create a new file /src/utils/index.js and add the following time formatting function:
export const formatTime = (time) => {\n const ms = Math.round(time / 100) % 10\n const secs = Math.floor(time / 1000) % 60\n const mins = Math.floor(time / 1000 / 60) % 60\n const hrs = Math.floor(time / 1000 / 1000 / 60) % 60\n return `${hrs}:${mins}:${secs}.${ms}`\n}\n\n
Now use that function in /src/components/TimerView.js to display the time correctly. Remember to import the util:
Import formatTime at the top:
import { formatTime } from '../utils';\n\n
Then use formatTime to format the time:
...\n<h1>{formatTime(timer.time)}</h1>\n...\n\n
Your timers should now look like something like the following:
Alright! We've successfully used timing methods and objects in JavaScript to accurately track time! And because of it, our timers now work! This is great! They still look a little ugly though, let's spruce them up a bit.
"},{"id":"T0E6OlNlY3Rpb24tMTE1MDY=","title":"Now Commit","htmlContent":"![\"formatted-timers\"](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/web-7-react-redux-timers-app@549335c706f2ac39b491d59065d65320e7abb511/P07-Keeping-Time/assets/format-timers.png\" "\\"\\"")
\n $ git add .\n$ git commit -m 'timers running'\n$ git push\n\nformatTime function uses a lot of repetitive code. Can you refactor it so that it's written in a way that is more in line with the DRY principle?00:00:00.0\nOur timers are working, they're styled and looking fly, but they still don't quite do one thing yet: persist! If you refresh the page, or open a new tab on localhost, the timers disappear.
In this last chapter, we'll fix that by persisting the timers with local storage.
"},{"id":"T0E6OlNlY3Rpb24tMTE1MDk=","title":"Overview","htmlContent":"Before you begin, let's take inventory of a few things:
JSON is JavaScript Object Notation. It's a string format that represents a JavasScript object. You can use it as a JS object in most cases and JS objects will convert to JSON most of the time.
When does it not work? If you're Object contains values that things other than: Strings, Numbers, Arrays, or Objects. What else is left? functions and classes! An Object that contains a function can't be converted to JSON.
"},{"id":"T0E6OlNlY3Rpb24tMTE1MTA=","title":"Save and Retrieve the store","htmlContent":"First step is to define a key to be used with local storage. Next we need to define two methods to load and save state from local storage.
Since it's not related to a a specific component, action, or reducer, our utils folder feels like a good place to put this.
Add the following to the top of the /src/utils/index.js file:
const TMRZ_STATE = \"TMRZ_STATE\"\n\n// Load State\nexport const loadState = () => {\n try {\n // Grab the state from local storage\n const serializedState = localStorage.getItem(TMRZ_STATE)\n if (serializedState === null) {\n return undefined\n }\n // convert the string into JSON for the Redux store\n return JSON.parse(serializedState)\n } catch(err) {\n return undefined\n }\n}\n\n// Save State\nexport const saveState = (state) => {\n try {\n // convert the state from JSON, into a string\n const serializedState = JSON.stringify(state)\n // save the state to local storage\n localStorage.setItem(TMRZ_STATE, serializedState)\n } catch(err) {\n console.log(\"Error saving data\")\n }\n}\n...\n\n
To persist state subscribe to changes from the store in App.js.
Import the methods from /util and add the following code to App.js. note: you need to replace the existing definition of store with the following:
import { loadState, saveState } from './utils'\n\n...\n\nconst persistedState = loadState()\nconst store = createStore(reducers, persistedState)\nstore.subscribe(() => {\n saveState(store.getState())\n})\n\n
In this arrangement saveState() is being called each time the store changes. Since the timers update the store every 50ms, this could cause performance issues if we're writing to local storage every 50ms as well. We can solve this with a throttling method. This is a method that limits the calls to other methods over time.
It might be possible to improve performance by throttling calls to saveState(). Lodash has a throttle method we can use to help us out.
Install Lodash via npm:
\n$ npm i --save lodash\n\n
Lodash has many methods. By default we will get the whole library, but let's just import only the part that we need, in this case throttle.
import lodash's throttle method into App.js
import throttle from 'lodash/throttle'\n\n
Finally, let's tell our store to save state every 1000ms using Lodash's throttle method:
Replace the current store.subscribe call with the following in App.js:
store.subscribe(throttle(() => {\n saveState(store.getState())\n}, 1000));\n\n
Now the timers are updating every 50ms, but state is only being written to local store every 1000ms.
Try refreshing the tab or opening a new tab on localhost and see your timers persist!
Congrats! We got some practice managing local storage in the context of managing application state through the Flux pattern! Not to mention some pretty sweet timers to boot.
As you go through this FEW course, try to tie the concepts you learned here into the course material. The foundational work here on building React apps will be used to make bigger and bolder apps down the road!
"},{"id":"T0E6OlNlY3Rpb24tMTE1MTI=","title":"Now Commit","htmlContent":"$ git add .\n$ git commit -m 'persisting timers'\n$ git push\n\nThis app is small in scope but covers a wide range of technologies and has room to expand. Here are some ideas that you can explore.
We promise this won't take longer than 2 minutes!
Please take a moment to rate your understanding of learning outcomes from this tutorial, and how we can improve it via our tutorial feedback form
This allows us to get feedback on how well the students are grasping the learning outcomes, and tells us where we can improve the tutorial experience.
"}]},"next":null,"previous":null}]}},"page":{"id":"T0E6OlBhZ2UtMjI1OA==","title":"Create New Timers","slug":"react-redux-timers-create-new-timers","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tMTE0ODg=","title":"Create New Timers","htmlContent":"So far we have been working on getting Redux and React up and\nrunning and no work has gone into components, which is the heart of React!
With actions and reducers in place you can now create\ncontainers/components that display state from the store and\nsend actions to update the store. Let's get those working!
new-timer componentThe first component we'll build is for creating new timers. The new timer component should have the following:
The above field that will allow users to input a name is a controlled component. This is when \"the React component that renders [an input] also controls what happens in that form on subsequent user input.\"
\n\nYou can read more about controlled components here
\nKeep in mind that we won't see timers until the Timer list component is created, which will be built in the next chapter.
Create a new folder in src called components. Now within this folder, create a NewTimer.js file which will house our new-timer component
Fill in /src/components/NewTimer.js with the following starter code
import React, { useState } from 'react'\nimport { useDispatch } from 'react-redux'\n\n// We need to import our action to add a new timer\nimport { addTimer } from '../actions'\n\nexport default function NewTimer() {\n const [ name, setName ] = useState('')\n const dispatch = useDispatch()\n\n return (\n <div>\n\n
</div>\n)\n
}\n```
You now have a basic NewTimer component structure, but we have no idea how to render it! Remember we want to have the following:
Let's build that out in the render function:
Fill in the render method in /src/components/NewTimer.js, as well as adding a few other ancillary methods and an export statement:
export default function NewTimer() {\n const [ name, setName ] = useState('')\n const dispatch = useDispatch()\n\n return (\n <div>\n <input\n type='text'\n placeholder=\"New Timer Name\"\n name=\"name\"\n value={name}\n onChange={(e) => setName(e.target.value)}/>\n <button\n onClick={() => dispatch(addTimer(name))}\n >Save</button>\n </div>\n )\n}\n\n
First React component in the bag! Great work on building a react component using JSX syntax, as well as getting more practice managing application state. But we can't stop here, let's build another component!
"},{"id":"T0E6OlNlY3Rpb24tMTE0OTA=","title":"Now Commit","htmlContent":"$ git add .\n$ git commit -m 'added new timer input'\n$ git push\n\n