diff --git a/index.html b/index.html
index c2f2d62..7ffcf3c 100644
--- a/index.html
+++ b/index.html
@@ -16,6 +16,8 @@
+
+
@@ -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: { : 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() );