feat: step 6 - redux thunk

Author: Antoine Lelaisant

package.json

@@ -13,6 +13,8 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.2",
     "redux": "^4.0.5",
+    "redux-devtools-extension": "^2.13.9",
+    "redux-thunk": "^2.3.0",
     "web-vitals": "^1.0.1"
   },
   "scripts": {

src/components/Game/Game.js

@@ -2,7 +2,7 @@ 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 { loop, start, stop } from 'modules/game'
 import { Navbar } from 'components/layout/Navbar'
 import { Gitcoin } from 'components/Gitcoin'
 import { Score } from 'components/Score'
@@ -13,11 +13,16 @@ export const Game = () => {
   const dispatch = useDispatch()
 
   useEffect(() => {
+    dispatch(start())
+
     const interval = setInterval(() => {
       dispatch(loop())
     }, 100)
 
-    return () => clearInterval(interval)
+    return () => {
+      clearInterval(interval)
+      dispatch(stop())
+    }
   })
 
   return (

src/configureStore.js

@@ -1,8 +1,18 @@
-import { createStore } from 'redux'
+import { createStore, applyMiddleware } from 'redux'
+import thunk from 'redux-thunk'
+import { composeWithDevTools } from 'redux-devtools-extension/logOnlyInProduction'
 import { rootReducer } from './modules'
 
 export default (initialState = {}) => {
-  const store = createStore(rootReducer, initialState)
+  const composeEnhancers = composeWithDevTools({})
+
+  const store = createStore(
+    rootReducer,
+    initialState,
+    composeEnhancers(
+      applyMiddleware(thunk)
+    )
+  )
 
   return store
 }

src/modules/game.js

@@ -2,6 +2,8 @@
 export const CLICK = 'game::CLICK'
 export const BUY_ITEM = 'game::BUY_ITEM'
 export const LOOP = 'game::LOOP'
+export const START = 'game::START'
+export const STOP = 'game::STOP'
 
 // Action creators
 export const click = () => ({
@@ -17,6 +19,25 @@ export const loop = () => ({
   type: LOOP
 })
 
+// Side Effects
+export const start = () => dispatch => {
+  const loadedGame = JSON.parse(localStorage.getItem('game'))
+
+  return dispatch({
+    type: START,
+    loadedGame: loadedGame ?? {}
+  })
+}
+
+export const stop = () => (dispatch, getState) => {
+  const serializedGame = JSON.stringify(getState().game)
+  localStorage.setItem('game', serializedGame)
+
+  return dispatch({
+    type: STOP
+  })
+}
+
 const INITIAL_STATE = {
   lines: 0,
   linesPerMillisecond: 0,
@@ -49,5 +70,11 @@ export const reducer = (state = INITIAL_STATE, action) => {
     }
   }
 
+  if (type === START) {
+    const { loadedGame } = action
+
+    return { ...state, ...loadedGame }
+  }
+
   return state
 }

yarn.lock

@@ -10008,6 +10008,16 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
+redux-devtools-extension@^2.13.9:
+  version "2.13.9"
+  resolved "https://registry.yarnpkg.com/redux-devtools-extension/-/redux-devtools-extension-2.13.9.tgz#6b764e8028b507adcb75a1cae790f71e6be08ae7"
+  integrity sha512-cNJ8Q/EtjhQaZ71c8I9+BPySIBVEKssbPpskBfsXqb8HJ002A3KRVHfeRzwRo6mGPqsm7XuHTqNSNeS1Khig0A==
+
+redux-thunk@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
+  integrity sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==
+
 redux@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"