Changes in input units are reflected in inputField.

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

-import { store } from '../../app/store';
+import { useSelector } from 'react-redux';
+import { selectCurrentInputUnit } from '../unit-selector/unitSelectorSlice';
 
 export function NumberInputField() {
-  const placeHolderString = `Enter # of "${store.getState().unitSelector.currentInputUnit}"`;
+  const currentInputUnit = useSelector(selectCurrentInputUnit);
+  const placeHolderString = `Enter # of "${currentInputUnit}"`;
   return (
     <div>
       <h1>NumberInputField</h1>

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

 import { store } from '../../app/store';
+import { useDispatch } from 'react-redux';
+import {
+  setCurrentInputUnit,
+} from './unitSelectorSlice';
 
 export function UnitSelector(props) {
   const unitSelectorOptions = [
@@ -24,17 +28,14 @@ export function UnitSelector(props) {
     },
   ];
 
+  const disbatch = useDispatch();
   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,
-    });
+    disbatch(setCurrentInputUnit(currentInputUnit));
     unsubscribe();
   }
 

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

@@ -8,32 +8,29 @@ const unitSelectorSlice = createSlice({
   },
   reducers: {
     // 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':
+    setCurrentInputUnit: (state, action) => {
+      const newUnit = action.payload;
       return {
         ...state,
-          currentInputUnit: unitToSwitchTo,
+        currentInputUnit: newUnit,
       };
-      case 'setCurrentOutputUnit':
+    },
+    setCurrentOutputUnit: (state, action) => {
+      const newUnit = action.payload;
       return {
         ...state,
-          currentOutputUnit: unitToSwitchTo,
+        currentOutputUnit: newUnit,
       };
-      default:
-        return state;
-      }
     },
   },
 });
 export default unitSelectorSlice;
 
 export const {
-  unitSelectorReducer,
+  setCurrentInputUnit,
+  setCurrentOutputUnit,
 } = unitSelectorSlice.actions;
 
-export function getCurrentInputUnit(state) {
+export function selectCurrentInputUnit(state) {
   return state.unitSelector.currentInputUnit;
 }