feat: step 4 - introduced redux and react-redux

Author: Antoine Lelaisant

jsconfig.json

@@ -8,5 +8,6 @@
   "paths": {
     "assets": ["./assets/*"],
     "components": ["./components/*"]
+    "modules": ["./modules/*"]
   }
 }

package.json

@@ -9,8 +9,10 @@
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.2",
+    "redux": "^4.0.5",
     "web-vitals": "^1.0.1"
   },
   "scripts": {

src/components/App.js

@@ -4,25 +4,29 @@ import {
   Switch,
   Route,
 } from 'react-router-dom'
+import { Provider } from 'react-redux'
 import CssBaseline from '@material-ui/core/CssBaseline'
 import './App.css'
 import { Game } from './Game'
 import { Home } from './Home'
+import configureStore from '../configureStore'
+
+const store = configureStore()
 
 export const App = () => {
   return (
-    <>
+    <Provider store={store}>
       <CssBaseline />
       <Router>
         <Switch>
           <Route exact path="/">
             <Home />
           </Route>
-          <Route path="/">
+          <Route path="/game">
             <Game />
           </Route>
         </Switch>
       </Router>
-    </>
+    </Provider>
   )
 }

src/components/Game/Game.js

@@ -1,70 +1,40 @@
-import React, { useState, useEffect } from 'react'
-import './Game.css'
+import React, { useEffect } from 'react'
+import { useDispatch } from 'react-redux'
 import Paper from '@material-ui/core/Paper'
+import './Game.css'
+import { loop } from 'modules/game'
 import { Navbar } from 'components/layout/Navbar'
 import { Gitcoin } from 'components/Gitcoin'
 import { Score } from 'components/Score'
 import { Store } from 'components/Store/Store'
 import { Skills } from 'components/Skills'
-import items from '../../items'
 
 export const Game = () => {
-  const [lines, setLines] = useState(0)
-  const [linesPerMillisecond, setLinesPerMillisecond] = useState(0)
-  const [ownedItems, setOwnedItems] = useState({})
+  const dispatch = useDispatch()
 
   useEffect(() => {
     const interval = setInterval(() => {
-      setLines(lines + linesPerMillisecond)
+      dispatch(loop())
     }, 100)
 
     return () => clearInterval(interval)
   })
 
-  useEffect(() => {
-    let count = 0
-
-    Object.keys(ownedItems).forEach(name => {
-      const item = items.find(element => element.name === name)
-      count += item.multiplier * ownedItems[name]
-    })
-
-    setLinesPerMillisecond(count)
-  }, [ownedItems])
-
-  const handleClick = () => {
-    setLines(lines + 1)
-  }
-
-  const handleBuy = item => {
-    setLines(lines - item.price)
-    setOwnedItems({
-      ...ownedItems,
-      [item.name]: (ownedItems[item.name] || 0) + 1
-    })
-  }
-
   return (
     <>
       <Navbar />
       <main className="game">
         <Paper elevation={3} className="left">
-          <Score
-            lines={lines}
-            linesPerSecond={parseInt(linesPerMillisecond * 10)}
-          />
-          <Gitcoin onClick={handleClick} />
+          <Score />
+          <Gitcoin />
         </Paper>
 
         <Paper elevation={3} className="center">
-          <Skills skills={ownedItems} />
+          <Skills />
         </Paper>
 
         <Paper elevation={3} className="right">
-          <Store
-            lines={lines}
-            onBuy={handleBuy}
-          />
+          <Store />
         </Paper>
       </main>
     </>

src/components/Gitcoin/Gitcoin.js

@@ -1,19 +1,20 @@
 import React from 'react'
-import PropTypes from 'prop-types'
+import { useDispatch } from 'react-redux'
 import './Gitcoin.css'
+import { click } from 'modules/game'
 import githubIcon from 'assets/github.svg'
 
-export const Gitcoin = ({ onClick }) => {
+export const Gitcoin = () => {
+  const disptach = useDispatch()
+
+  const handleClick = () => disptach(click())
+
   return (
     <button
       className="gitcoin"
-      onClick={onClick}
+      onClick={handleClick}
     >
       <img src={githubIcon} alt="Gitcoin" />
     </button>
   )
 }
-
-Gitcoin.propTypes = {
-  onClick: PropTypes.func.isRequired,
-}

src/components/Home.js

@@ -36,7 +36,7 @@ export const Home = () => {
             <div className={classes.heroButtons}>
               <Grid container spacing={2} justify="center">
                 <Grid item>
-                  <Link to="/gitclicker">
+                  <Link to="/game">
                     <Button variant="contained" color="primary">
                       Play
                     </Button>

src/components/Score.js

@@ -1,14 +1,14 @@
 import React from 'react'
-import PropTypes from 'prop-types'
+import { useSelector } from 'react-redux'
 
-export const Score = ({ lines, linesPerSecond }) => (
-  <>
-    <h3 style={{fontFamily: 'Orbitron'}}>{parseInt(lines)} lines</h3>
-    <small>per second: {linesPerSecond}</small>
-  </>
-)
+export const Score = () => {
+  const lines = useSelector(state => parseInt(state.game.lines))
+  const linesPerSecond = useSelector(state => parseInt(state.game.linesPerMillisecond * 10))
 
-Score.propTypes = {
-  lines: PropTypes.number.isRequired,
-  linesPerSecond: PropTypes.number.isRequired,
+  return (
+    <>
+      <h3 style={{fontFamily: 'Orbitron'}}>{lines} lines</h3>
+      <small>per second: {linesPerSecond}</small>
+    </>
+  )
 }

src/components/Skills/Skills.js

@@ -1,10 +1,12 @@
 import React from 'react'
+import { useSelector } from 'react-redux'
 import './Skills.css'
-import PropTypes from 'prop-types'
 import Typography from '@material-ui/core/Typography'
 import { Section } from './Section'
 
-export const Skills = ({ skills }) => {
+export const Skills = () => {
+  const skills = useSelector(state => state.game.skills)
+
   return (
     <>
       <Typography variant="h5">Skills</Typography>
@@ -20,7 +22,3 @@ export const Skills = ({ skills }) => {
     </>
   )
 }
-
-Skills.propTypes = {
-  skills: PropTypes.objectOf(PropTypes.number).isRequired,
-}

src/components/Store/Store.js

@@ -1,11 +1,19 @@
 import React from 'react'
-import PropTypes from 'prop-types'
+import { useSelector, useDispatch } from 'react-redux'
 import Typography from '@material-ui/core/Typography'
 import './Store.css'
+import { buyItem } from 'modules/game'
 import { Item } from './Item'
 import items from '../../items'
 
-export const Store = ({ lines, onBuy }) => {
+export const Store = () => {
+  const dispatch = useDispatch()
+  const lines = useSelector(state => state.game.lines)
+
+  const handleBuy = item => {
+    dispatch(buyItem(item))
+  }
+
   return (
     <div className="store">
       <Typography variant="h5">Store</Typography>
@@ -15,14 +23,9 @@ export const Store = ({ lines, onBuy }) => {
           key={key} 
           item={item}
           lines={lines}
-          onBuy={onBuy}
+          onBuy={handleBuy}
         />
       )}
     </div>
   )
 }
-
-Store.propTypes = {
-  lines: PropTypes.number.isRequired,
-  onBuy: PropTypes.func.isRequired,
-}

src/configureStore.js

@@ -0,0 +1,8 @@
+import { createStore } from 'redux'
+import { rootReducer } from './modules'
+
+export default () => {
+  const store = createStore(rootReducer)
+
+  return store
+}