Finished unitselectorSlice and store features.

unit-conversion/src/app/store.js

 import { configureStore } from '@reduxjs/toolkit';
-import counterSlice from '../features/counter/counterSlice.js';
+import unitSelectorSlice from '../features/unit-selector/unitSelectorSlice.js';
 
 export const store = configureStore({
   reducer: {
-    [counterSlice.name]: counterSlice.reducer,
+    [unitSelectorSlice.name]: unitSelectorSlice.reducer,
   },
 });

unit-conversion/src/features/number-input-field/numberInputField.js

-import { UnitSelector } from '../unit-selector/unitSelector';
+import { store } from '../../app/store';
 
 export function NumberInputField() {
-  const unitSelectorName = UnitSelector.name;
-  const inputUnits = document.getElementById('inputUnitSelector').UnitSelector;
-  const placeHolderString = `Enter # of ${inputUnits}`;
+  const placeHolderString = `Enter # of "${store.getState().unitSelector.currentInputUnit}"`;
   return (
     <div>
       <h1>NumberInputField</h1>
-      <p>{ unitSelectorName }</p>
       <input required type="text" placeholder={ placeHolderString }></input>
     </div>
   );

unit-conversion/src/features/unit-selector/unitSelector.js

+import { store } from '../../app/store';
+
 export function UnitSelector(props) {
   const unitSelectorOptions = [
     {
@@ -12,10 +14,6 @@ export function UnitSelector(props) {
       label: 'Cm',
       value: 'cm',
     },
-    {
-      label: 'Cm',
-      value: 'cm',
-    },
     {
       label: 'Ft',
       value: 'ft',
@@ -26,15 +24,35 @@ export function UnitSelector(props) {
     },
   ];
 
+  function handleChange(e) {
+    const unsubscribe = store.subscribe(() =>
+      console.log('State after dispatch: ', store.getState()),
+    );
+
+    const currentInputUnit = e.target.value;
+    console.log(currentInputUnit);
+    store.dispatch({
+      type: 'setCurrentInputUnit',
+      payload: currentInputUnit,
+    });
+    unsubscribe();
+  }
+
+  function handleSubmit(e) {
+    e.preventDefault();
+  }
+
   return (
     <div>
+      <form onSubmit={handleSubmit}>
         <h1>Unit Selector</h1>
         <div className="select-container">
-        <select name="units">
+          <select name="units" onChange={handleChange}>
             {unitSelectorOptions.map((option) =>
               <option value={option.value}>{option.label}</option>)}
           </select>
         </div>
+      </form>
     </div>
   );
 }

unit-conversion/src/features/unit-selector/unitSelectorSlice.js

@@ -3,23 +3,37 @@ import { createSlice } from '@reduxjs/toolkit';
 const unitSelectorSlice = createSlice({
   name: 'unitSelector',
   initialState: {
-    selectedInputUnit: '',
+    currentInputUnit: 'in',
+    currentOutputUnit: 'in',
   },
   reducers: {
-    setCurrentInputUnit: (state, action) => {
-      const {
-        value,
-      } = action.payload;
-      state.value = value;
+    // The action payload should have the unit to switch to with the in or out
+    unitSelectorReducer: (state, action) => {
+      console.log(state, action);
+      const unitToSwitchTo = action.payload;
+      switch (action.type){
+      case 'setCurrentInputUnit':
+        return {
+          ...state,
+          currentInputUnit: unitToSwitchTo,
+        };
+      case 'setCurrentOutputUnit':
+        return {
+          ...state,
+          currentOutputUnit: unitToSwitchTo,
+        };
+      default:
+        return state;
+      }
     },
   },
 });
 export default unitSelectorSlice;
 
 export const {
-  setCurrentInputUnit,
+  unitSelectorReducer,
 } = unitSelectorSlice.actions;
 
-export function selectCurrentInputUnit(state) {
-  return state.state.value;
+export function getCurrentInputUnit(state) {
+  return state.unitSelector.currentInputUnit;
 }