diff --git a/package-lock.json b/package-lock.json index f430c28..3aaf080 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,18 +8,16 @@ "name": "react-tenzies-game", "version": "0.1.0", "dependencies": { - "@redux-devtools/extension": "^3.2.3", + "@reduxjs/toolkit": "^1.9.1", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "bootstrap": "^5.2.2", - "immer": "^9.0.16", "react": "^18.2.0", "react-dom": "^18.2.0", "react-redux": "^8.0.5", "react-scripts": "5.0.1", "react-uuid": "^2.0.0", - "redux": "^4.2.0", "sass": "^1.56.0", "web-vitals": "^2.1.4" }, @@ -3140,16 +3138,27 @@ "url": "https://opencollective.com/popperjs" } }, - "node_modules/@redux-devtools/extension": { - "version": "3.2.3", - "resolved": "https://registry.npmjs.org/@redux-devtools/extension/-/extension-3.2.3.tgz", - "integrity": "sha512-y90IIqdQF6kIkP4KfBCfiFrnu9KMrEPUmcnb5A3v12tjfwRJUXecX8vCEbFqqJLjOomvVmis0Aal7QdFjk6CRQ==", + "node_modules/@reduxjs/toolkit": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.1.tgz", + "integrity": "sha512-HikrdY+IDgRfRYlCTGUQaiCxxDDgM1mQrRbZ6S1HFZX5ZYuJ4o8EstNmhTwHdPl2rTmLxzwSu0b3AyeyTlR+RA==", "dependencies": { - "@babel/runtime": "^7.18.3", - "immutable": "^4.0.0" + "immer": "^9.0.16", + "redux": "^4.2.0", + "redux-thunk": "^2.4.2", + "reselect": "^4.1.7" }, "peerDependencies": { - "redux": "^3.1.0 || ^4.0.0" + "react": "^16.9.0 || ^17.0.0 || ^18", + "react-redux": "^7.2.1 || ^8.0.2" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-redux": { + "optional": true + } } }, "node_modules/@rollup/plugin-babel": { @@ -14634,6 +14643,14 @@ "@babel/runtime": "^7.9.2" } }, + "node_modules/redux-thunk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.2.tgz", + "integrity": "sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==", + "peerDependencies": { + "redux": "^4" + } + }, "node_modules/regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", @@ -14853,8 +14870,7 @@ "node_modules/reselect": { "version": "4.1.7", "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.7.tgz", - "integrity": "sha512-Zu1xbUt3/OPwsXL46hvOOoQrap2azE7ZQbokq61BQfiXvhewsKDwhMeZjTX9sX0nvw1t/U5Audyn1I9P/m9z0A==", - "dev": true + "integrity": "sha512-Zu1xbUt3/OPwsXL46hvOOoQrap2azE7ZQbokq61BQfiXvhewsKDwhMeZjTX9sX0nvw1t/U5Audyn1I9P/m9z0A==" }, "node_modules/resolve": { "version": "1.22.1", @@ -19430,13 +19446,15 @@ "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==", "peer": true }, - "@redux-devtools/extension": { - "version": "3.2.3", - "resolved": "https://registry.npmjs.org/@redux-devtools/extension/-/extension-3.2.3.tgz", - "integrity": "sha512-y90IIqdQF6kIkP4KfBCfiFrnu9KMrEPUmcnb5A3v12tjfwRJUXecX8vCEbFqqJLjOomvVmis0Aal7QdFjk6CRQ==", + "@reduxjs/toolkit": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.1.tgz", + "integrity": "sha512-HikrdY+IDgRfRYlCTGUQaiCxxDDgM1mQrRbZ6S1HFZX5ZYuJ4o8EstNmhTwHdPl2rTmLxzwSu0b3AyeyTlR+RA==", "requires": { - "@babel/runtime": "^7.18.3", - "immutable": "^4.0.0" + "immer": "^9.0.16", + "redux": "^4.2.0", + "redux-thunk": "^2.4.2", + "reselect": "^4.1.7" } }, "@rollup/plugin-babel": { @@ -27660,6 +27678,12 @@ "@babel/runtime": "^7.9.2" } }, + "redux-thunk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.2.tgz", + "integrity": "sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==", + "requires": {} + }, "regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", @@ -27826,8 +27850,7 @@ "reselect": { "version": "4.1.7", "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.7.tgz", - "integrity": "sha512-Zu1xbUt3/OPwsXL46hvOOoQrap2azE7ZQbokq61BQfiXvhewsKDwhMeZjTX9sX0nvw1t/U5Audyn1I9P/m9z0A==", - "dev": true + "integrity": "sha512-Zu1xbUt3/OPwsXL46hvOOoQrap2azE7ZQbokq61BQfiXvhewsKDwhMeZjTX9sX0nvw1t/U5Audyn1I9P/m9z0A==" }, "resolve": { "version": "1.22.1", diff --git a/package.json b/package.json index dda4c9f..8b85e46 100644 --- a/package.json +++ b/package.json @@ -3,18 +3,16 @@ "version": "0.1.0", "private": true, "dependencies": { - "@redux-devtools/extension": "^3.2.3", + "@reduxjs/toolkit": "^1.9.1", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "bootstrap": "^5.2.2", - "immer": "^9.0.16", "react": "^18.2.0", "react-dom": "^18.2.0", "react-redux": "^8.0.5", "react-scripts": "5.0.1", "react-uuid": "^2.0.0", - "redux": "^4.2.0", "sass": "^1.56.0", "web-vitals": "^2.1.4" }, diff --git a/src/app-redux-store/actions/card-actions.js b/src/app-redux-store/actions/card-actions.js deleted file mode 100644 index efed6c6..0000000 --- a/src/app-redux-store/actions/card-actions.js +++ /dev/null @@ -1,34 +0,0 @@ -/** - * list of actions and their respective payloads (if applicable) for the cards feature in the redux - * state - */ - -const BASE_STRING = "cards"; - -export const createFreshCardsAction = () => { - return { - type: `${BASE_STRING}/CREATE_FRESH_CARDS`, - payload: {} - }; -}; -export const rollDiceAction = () => { - return { - type: `${BASE_STRING}/ROLL_THE_DICE` - }; -}; -export const lockCardById = (cardId) => { - return { - type: `${BASE_STRING}/LOCK_CARD`, - payload: { - id: cardId - } - }; -}; -export const unlockCardById = (cardId) => { - return { - type: `${BASE_STRING}/UNLOCK_CARD`, - payload: { - id: cardId - } - }; -}; diff --git a/src/app-redux-store/actions/game-state-actions.js b/src/app-redux-store/actions/game-state-actions.js deleted file mode 100644 index bb9e553..0000000 --- a/src/app-redux-store/actions/game-state-actions.js +++ /dev/null @@ -1,13 +0,0 @@ -/** - * list of actions and their respective payloads (if applicable) for the cards feature in the redux - * state - */ - -const BASE_STRING = "game"; - -export const checkIfGameIsComplete = () => { - return { - type: `${BASE_STRING}/CHECK_IF_COMPLETE`, - payload: {} - }; -}; diff --git a/src/app-redux-store/all-reducers.js b/src/app-redux-store/all-reducers.js deleted file mode 100644 index f1c525b..0000000 --- a/src/app-redux-store/all-reducers.js +++ /dev/null @@ -1,17 +0,0 @@ -/** - * helps to create the combined reducers instance for the redux store - **/ - -/* node module imports */ -import { combineReducers } from "redux"; - -/* app imports */ -import cardsReducer from "./reducers/cards/index.js"; -import gameStateReducer from "./reducers/game-state/index.js"; - -export const reducersCentral = () => { - return combineReducers({ - cards: cardsReducer, - gameIsComplete: gameStateReducer - }); -}; diff --git a/src/app-redux-store/index.js b/src/app-redux-store/index.js deleted file mode 100644 index 4cdceab..0000000 --- a/src/app-redux-store/index.js +++ /dev/null @@ -1,17 +0,0 @@ -/** - * main entry file for the application's redux store - **/ - -/* node modules import */ -import { createStore } from "redux"; - -/* app imports */ -import { reducersCentral } from "./all-reducers.js"; -import { appMiddlewareCentral } from "./middleware/index.js"; - -export const appReduxStore = () => { - return createStore( - reducersCentral(), - appMiddlewareCentral() - ); -}; diff --git a/src/app-redux-store/middleware/cards/index.js b/src/app-redux-store/middleware/cards/index.js index 15e70e5..9638a72 100644 --- a/src/app-redux-store/middleware/cards/index.js +++ b/src/app-redux-store/middleware/cards/index.js @@ -1,21 +1,21 @@ /* app imports */ -import { createFreshCardsAction, rollDiceAction } from "@appReduxStore/actions/card-actions.js"; +import { createFreshCards, rollDice } from "@appReduxStore/reducers/cards/index.js"; import createFreshDeck from "./create-fresh-deck.js"; export const cardsMiddleware = (storeApi) => { return (next) => { return (action) => { - if (action.type === createFreshCardsAction().type) { + if (action.type === createFreshCards().type) { setTimeout(() => { const freshDeckOfCards = createFreshDeck(); - action.payload = freshDeckOfCards; - action.setIsLoading(false); + action.payload.freshDeckOfCards = freshDeckOfCards; + action.payload.setIsLoading(false); next(action); }, 2000); } - else if (action.type === rollDiceAction().type) { + else if (action.type === rollDice().type) { setTimeout(() => { - action.setIsLoading(false); + action.payload.setIsLoading(false); next(action); }, 2000); } diff --git a/src/app-redux-store/middleware/game-state/index.js b/src/app-redux-store/middleware/game-state/index.js index 0fd02f8..a45b4b8 100644 --- a/src/app-redux-store/middleware/game-state/index.js +++ b/src/app-redux-store/middleware/game-state/index.js @@ -1,12 +1,14 @@ /* app imports */ -import { checkIfGameIsComplete } from "@appReduxStore/actions/game-state-actions.js"; +import { checkIfGameIsComplete } from "@appReduxStore/reducers/game-state/index.js"; export const gameStateMiddleware = (storeApi) => { return (next) => { return (action) => { if (action.type === checkIfGameIsComplete().type) { const currentCardsStack = storeApi.getState().cards; - action.payload.cards = currentCardsStack; + action.payload = { + cards: currentCardsStack + }; return next(action); } else { diff --git a/src/app-redux-store/middleware/index.js b/src/app-redux-store/middleware/index.js deleted file mode 100644 index 7bca196..0000000 --- a/src/app-redux-store/middleware/index.js +++ /dev/null @@ -1,18 +0,0 @@ -/** - * this gives the ability to use middleware along with the redux dev tools instance to track state - * changes in the app - **/ - -/* node modules imports */ -import { applyMiddleware } from "redux"; -import { composeWithDevTools } from '@redux-devtools/extension'; - -/* app imports */ -import { cardsMiddleware } from "./cards/index.js"; -import { gameStateMiddleware } from "./game-state/index.js"; - -export const appMiddlewareCentral = () => { - return composeWithDevTools( - applyMiddleware(cardsMiddleware, gameStateMiddleware) - ); -}; diff --git a/src/app-redux-store/middleware/root-middleware.js b/src/app-redux-store/middleware/root-middleware.js new file mode 100644 index 0000000..3d6dd90 --- /dev/null +++ b/src/app-redux-store/middleware/root-middleware.js @@ -0,0 +1,18 @@ +/** + * this gives the ability to use middleware along with the redux dev tools instance to track state + * changes in the app + **/ + +/* app imports */ +import { cardsMiddleware } from "./cards/index.js"; +import { gameStateMiddleware } from "./game-state/index.js"; + +export const rootMiddleware = (getDefaultMiddleware) => { + const appMiddleware = getDefaultMiddleware({ + serializableCheck: { + ignoredActions: ['cards/createFreshCards', 'cards/rollDice'] + } + }).concat(cardsMiddleware, gameStateMiddleware); + + return appMiddleware; +}; diff --git a/src/app-redux-store/reducers/cards/cards-normalizer.js b/src/app-redux-store/reducers/cards/cards-normalizer.js index b3e201e..38945e6 100644 --- a/src/app-redux-store/reducers/cards/cards-normalizer.js +++ b/src/app-redux-store/reducers/cards/cards-normalizer.js @@ -2,16 +2,11 @@ * adviced best practice from redux docs for storage of data in the redux store **/ -/* node module imports */ -import produce from "immer"; - export const arrayToObjectNormalizer = (arrayOfCards) => { - let normalized = produce(arrayOfCards, (draft) => { - return draft.reduce((composed, card) => { - let key = card.id; - composed[key] = card; - return composed; - }, {}); - }); + let normalized = arrayOfCards.reduce((composed, card) => { + let key = card.id; + composed[key] = card; + return composed; + }, {}); return normalized; }; diff --git a/src/app-redux-store/reducers/cards/generate-deck-on-roll.js b/src/app-redux-store/reducers/cards/generate-deck-on-roll.js index 98f1249..00b6fe6 100644 --- a/src/app-redux-store/reducers/cards/generate-deck-on-roll.js +++ b/src/app-redux-store/reducers/cards/generate-deck-on-roll.js @@ -1,33 +1,29 @@ /* node module imports */ import uuid from "react-uuid"; -import produce from "immer"; /* app imports */ import { generateRandomNumbers } from "@appReduxStore/reducers/cards/generate-random-numbers.js"; import { getCardMap } from "@appReduxStore/reducers/cards/card-map.js"; export default function generateDeckOnRoll(state) { - let updatedDeck = produce(state, (draft) => { - const cardMap = getCardMap(); - return Object.keys(draft).reduce((composed, key) => { - let card = draft[key]; + const cardMap = getCardMap(); + return Object.keys(state).reduce((composed, key) => { + let card = state[key]; - if (card.isLocked) { - composed[key] = card; - } - else { - const randNum = String(generateRandomNumbers(1, 10)); - const key = uuid(); - composed[key] = { - id: key, - isLocked: false, - name: cardMap[randNum].name, - icon: cardMap[randNum].src - }; - } + if (card.isLocked) { + composed[key] = card; + } + else { + const randNum = String(generateRandomNumbers(1, 10)); + const key = uuid(); + composed[key] = { + id: key, + isLocked: false, + name: cardMap[randNum].name, + icon: cardMap[randNum].src + }; + } - return composed; - }, {}); - }); - return updatedDeck; + return composed; + }, {}); } diff --git a/src/app-redux-store/reducers/cards/index.js b/src/app-redux-store/reducers/cards/index.js index 4fec818..ba0f6b4 100644 --- a/src/app-redux-store/reducers/cards/index.js +++ b/src/app-redux-store/reducers/cards/index.js @@ -1,33 +1,52 @@ /* node module imports */ -import { - createFreshCardsAction, - lockCardById, - unlockCardById, - rollDiceAction -} from "@appReduxStore/actions/card-actions.js"; +import { createSlice } from "@reduxjs/toolkit"; /* app imports */ import generateDeckOnRoll from "./generate-deck-on-roll.js"; import { arrayToObjectNormalizer } from "./cards-normalizer.js"; import { performUnlockCardById, performLockCardById } from "./lock-toggle.js"; -let initialState = {}; - -export default function cardsReducer(state = initialState, action) { - if (action.type === createFreshCardsAction().type) { - let arrayOfCards = action.payload.splice(0); - return arrayToObjectNormalizer(arrayOfCards); - } - else if (action.type === unlockCardById().type) { - return performUnlockCardById(state, action.payload.id); - } - else if (action.type === lockCardById().type) { - return performLockCardById(state, action.payload.id); +/* create */ +const cardsSlice = createSlice({ + name: "cards", + initialState: {}, + reducers: { + createFreshCards: { + reducer(state, action) { + let arrayOfCards = action.payload.freshDeckOfCards.splice(0); + return arrayToObjectNormalizer(arrayOfCards); + }, + prepare(setIsLoading) { + return {payload: {setIsLoading}} + } + }, + unlockCardById: { + reducer(state, action) { + return performUnlockCardById(state, action.payload.id); + }, + prepare(id) { + return {payload: {id}} + } + }, + lockCardById: { + reducer(state, action) { + return performLockCardById(state, action.payload.id); + }, + prepare(id) { + return {payload: {id}} + } + }, + rollDice: { + reducer(state, action) { + return generateDeckOnRoll(state); + }, + prepare(setIsLoading) { + return {payload: {setIsLoading}} + } + } } - else if (action.type === rollDiceAction().type) { - return generateDeckOnRoll(state); - } - else { - return state; - } -} +}); + +/* exports */ +export const { createFreshCards, unlockCardById, lockCardById, rollDice } = cardsSlice.actions; +export default cardsSlice.reducer; diff --git a/src/app-redux-store/reducers/cards/lock-toggle.js b/src/app-redux-store/reducers/cards/lock-toggle.js index 3e04278..c2eeb84 100644 --- a/src/app-redux-store/reducers/cards/lock-toggle.js +++ b/src/app-redux-store/reducers/cards/lock-toggle.js @@ -1,16 +1,11 @@ -/* node module imports */ -import produce from "immer"; - /* unlock */ -export const performUnlockCardById = produce((draft, cardId) => { - if (Object.keys(draft).length > 0) { - draft[cardId].isLocked = false; - } -}); +export const performUnlockCardById = (state, cardId) => { + state[cardId].isLocked = false; + return state; +}; /* lock */ -export const performLockCardById = produce((draft, cardId) => { - if (Object.keys(draft).length > 0) { - draft[cardId].isLocked = true; - } -}); +export const performLockCardById = (state, cardId) => { + state[cardId].isLocked = true; + return state; +}; diff --git a/src/app-redux-store/reducers/cards/perform-lock-card-by-id.js b/src/app-redux-store/reducers/cards/perform-lock-card-by-id.js deleted file mode 100644 index 8eb1648..0000000 --- a/src/app-redux-store/reducers/cards/perform-lock-card-by-id.js +++ /dev/null @@ -1,6 +0,0 @@ -export default function performCardLockById(stackOfCards, cardId) { - if (Object.keys(stackOfCards).length > 0) { - stackOfCards[cardId].isLocked = true; - } - return stackOfCards; -}; diff --git a/src/app-redux-store/reducers/cards/perform-unlock-card-by-id.js b/src/app-redux-store/reducers/cards/perform-unlock-card-by-id.js deleted file mode 100644 index 42838f8..0000000 --- a/src/app-redux-store/reducers/cards/perform-unlock-card-by-id.js +++ /dev/null @@ -1,8 +0,0 @@ -/* node module imports */ -import produce from "immer"; - -export const performUnlockCardById = produce((draft, cardId) => { - if (Object.keys(draft).length > 0) { - draft[cardId].isLocked = false; - } -}); diff --git a/src/app-redux-store/reducers/game-state/index.js b/src/app-redux-store/reducers/game-state/index.js index 4849865..39f1197 100644 --- a/src/app-redux-store/reducers/game-state/index.js +++ b/src/app-redux-store/reducers/game-state/index.js @@ -1,15 +1,22 @@ +/* node module imports */ +import { createSlice } from "@reduxjs/toolkit"; + /* app imports */ -import { checkIfGameIsComplete } from "@appReduxStore/actions/game-state-actions.js"; import gameStatusChecker from "./check-if-complete.js"; -let initialState = false; - -export default function gameStateReducer(state = initialState, action) { - if (action.type === checkIfGameIsComplete().type && - "cards" in action.payload && Object.keys(action.payload.cards).length > 0) { - return gameStatusChecker(action.payload.cards); +/* create */ +const gameStateSlice = createSlice({ + name: "gameState", + initialState: false, + reducers: { + checkIfGameIsComplete(state, action) { + if ("cards" in action.payload && Object.keys(action.payload.cards).length > 0) { + return gameStatusChecker(action.payload.cards); + } + } } - else { - return state; - } -} +}); + +/* exports */ +export const { checkIfGameIsComplete } = gameStateSlice.actions; +export default gameStateSlice.reducer; diff --git a/src/app-redux-store/reducers/root-reducer.js b/src/app-redux-store/reducers/root-reducer.js new file mode 100644 index 0000000..8ce0b20 --- /dev/null +++ b/src/app-redux-store/reducers/root-reducer.js @@ -0,0 +1,14 @@ +/** + * helps to create the combined reducers instance for the redux store + **/ + +/* app imports */ +import cardsReducer from "./cards/index.js"; +import gameStateReducer from "./game-state/index.js"; + +export const rootReducer = () => { + return { + cards: cardsReducer, + gameIsComplete: gameStateReducer + }; +}; diff --git a/src/app-redux-store/store.js b/src/app-redux-store/store.js new file mode 100644 index 0000000..613bbb5 --- /dev/null +++ b/src/app-redux-store/store.js @@ -0,0 +1,13 @@ +/* node module imports */ +import { configureStore } from "@reduxjs/toolkit"; + +/* app imports */ +import { rootMiddleware } from "./middleware/root-middleware.js"; +import { rootReducer } from "./reducers/root-reducer.js"; + +export const appRTKStore = () => { + return configureStore({ + reducer: rootReducer(), + middleware: rootMiddleware + }); +}; diff --git a/src/components/cards/component.js b/src/components/cards/component.js index 2968f30..8785f9b 100644 --- a/src/components/cards/component.js +++ b/src/components/cards/component.js @@ -7,8 +7,8 @@ import "./styles.scss"; import { LockComponent } from "./lock-component.js"; import selectionSound from "@appSounds/selection-sound.wav"; import deselectionSound from "@appSounds/deselect-sound.wav"; -import { lockCardById, unlockCardById } from "@appReduxStore/actions/card-actions.js"; -import { checkIfGameIsComplete } from "@appReduxStore/actions/game-state-actions.js"; +import { lockCardById, unlockCardById } from "@appReduxStore/reducers/cards/index.js"; +import { checkIfGameIsComplete } from "@appReduxStore/reducers/game-state/index.js"; export const Card = (props) => { const dispatchToReduxStore = useDispatch(); diff --git a/src/index.js b/src/index.js index b1b7302..b2ef3f4 100644 --- a/src/index.js +++ b/src/index.js @@ -5,11 +5,11 @@ import { Provider } from "react-redux"; /* app imports */ import { App } from './App'; -import { appReduxStore } from "./app-redux-store/index.js"; +import { appRTKStore } from "./app-redux-store/store.js"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( - + ); diff --git a/src/pages/home/hooks/use-cards-hook.js b/src/pages/home/hooks/use-cards-hook.js index 00e14d0..6958444 100644 --- a/src/pages/home/hooks/use-cards-hook.js +++ b/src/pages/home/hooks/use-cards-hook.js @@ -3,7 +3,7 @@ import { useState, useEffect } from "react"; import { useDispatch, useSelector } from "react-redux"; /* app imports */ -import { createFreshCardsAction, rollDiceAction } from "@appReduxStore/actions/card-actions.js"; +import { createFreshCards, rollDice } from "@appReduxStore/reducers/cards/index.js"; export const useCardsHook = () => { /* component level state management */ @@ -23,15 +23,13 @@ export const useCardsHook = () => { /* event handler */ const onDiceRoll = () => { setIsLoading(true); - let action = rollDiceAction(); - action.setIsLoading = setIsLoading; + let action = rollDice(setIsLoading); dispatchToReduxStore(action); }; /* load data from here */ useEffect(() => { - let action = createFreshCardsAction(); - action.setIsLoading = setIsLoading; + let action = createFreshCards(setIsLoading); dispatchToReduxStore(action); }, []);