Switch to RTK (Redux ToolKit). Fixes #4

DarrenSem · Aug 4, 2023 · d043853 · d043853
1 parent 4403165
commit d043853
Showing 1 changed file with 53 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -16,6 +16,8 @@
 <script src="https://unpkg.com/[email protected]/dist/redux.js"></script>
 <script src="https://unpkg.com/[email protected]/dist/react-redux.js"></script>
 
+<script src="https://unpkg.com/@reduxjs/[email protected]/dist/redux-toolkit.umd.min.js"></script>
+
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
 </head>
 <body class="m-2">
@@ -96,6 +98,15 @@
 	bonus: loadedBonus = 5
 } = loaded;
 
+const modalReducerInitialState = {
+	showModal: false,
+	bonus: loadedBonus
+};
+
+
+
+//// Redux standalone... (aka before Redux Tooklit)
+/*
 // Action Types
 const SHOW_MODAL = "SHOW_MODAL";
 const HIDE_MODAL = "HIDE_MODAL";
@@ -109,7 +120,7 @@
 // Reducers
 const modalReducer = (state, action) => {
 
-	state ??= { showModal: false, bonus: loadedBonus };
+	state ??= modalReducerInitialState;
 
 	switch(action.type) {
 	case SHOW_MODAL:
@@ -127,6 +138,38 @@
 };
 
 const reduxStore = Redux.createStore(modalReducer);
+*/
+
+//// Redux Toolkit...
+/**/
+const { createSlice, configureStore } = RTK;
+
+// Create slice
+const modalSlice = createSlice({
+	name: "modal",
+	initialState: modalReducerInitialState,
+	reducers: {
+		showBonusModal: (state) => {
+			state.showModal = true;
+		},
+		hideBonusModal: (state) => {
+			state.showModal = false;
+		},
+		setBonus: (state, action) => {
+			state.bonus = action.payload;
+		}
+	}
+});
+
+// Reducers and actions generated from the slice
+const { showBonusModal, hideBonusModal, setBonus } = modalSlice.actions;
+
+// Create store with Redux Toolkit "configureStore"
+const reduxStore = configureStore( {
+	reducer: modalSlice.reducer					// simple scenario; therefore don't need to separate into namespaces
+	// reducer: { modal: modalSlice.reducer }	// "complex scenario" would need to establish separate namespace for modal
+} );
+/**/
 
 
 
@@ -136,11 +179,16 @@
 		loadedPlaces.some(Boolean) ? loadedPlaces : EXAMPLE_DATA
 	);
 
-	const dispatch = ReactRedux.useDispatch();
-
-	const showModalState = ReactRedux.useSelector(state => state.showModal);
+	const { useDispatch, useSelector } = ReactRedux;
+	const dispatch = useDispatch();
 
-	const CL_PERCENT = ReactRedux.useSelector(state => state.bonus);
+	//// Redux standalone... (aka beforeRedux Tooklit)
+	const showModalState = useSelector(state => state.showModal);
+	const CL_PERCENT = useSelector(state => state.bonus);
+	//// Redux Toolkit...
+	// unchanged since .configureStore() { reducer: modalSlice.reducer } NOT { reducer: { <namespace>: modalSlice.reducer } }
+	// below needed ONLY if configureStore() WITH reducer: { modal: modalSlice.reducer } NOT reducer: modalSlice.reducer
+	// const { bonus: CL_PERCENT, showModal: showModalState } = useSelector(state => state.modal);	// ONLY if "complex scenario"
 
 	const handleBonusClick = () => {
 		dispatch( showBonusModal() );