From 32feda1635d02c1b02d8f59fbceb79af4249e777 Mon Sep 17 00:00:00 2001 From: Gabriel Clark <> Date: Tue, 7 Sep 2021 16:57:42 -0500 Subject: [PATCH] Changes in input units are reflected in inputField. --- .../number-input-field/numberInputField.js | 6 ++-- .../features/unit-selector/unitSelector.js | 11 +++--- .../unit-selector/unitSelectorSlice.js | 35 +++++++++---------- 3 files changed, 26 insertions(+), 26 deletions(-) diff --git a/unit-conversion/src/features/number-input-field/numberInputField.js b/unit-conversion/src/features/number-input-field/numberInputField.js index 7ad9b90..e985236 100644 --- a/unit-conversion/src/features/number-input-field/numberInputField.js +++ b/unit-conversion/src/features/number-input-field/numberInputField.js @@ -1,7 +1,9 @@ -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> diff --git a/unit-conversion/src/features/unit-selector/unitSelector.js b/unit-conversion/src/features/unit-selector/unitSelector.js index 3c08415..3776e0e 100644 --- a/unit-conversion/src/features/unit-selector/unitSelector.js +++ b/unit-conversion/src/features/unit-selector/unitSelector.js @@ -1,4 +1,8 @@ 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(); } diff --git a/unit-conversion/src/features/unit-selector/unitSelectorSlice.js b/unit-conversion/src/features/unit-selector/unitSelectorSlice.js index 7ebb5c2..59a638d 100644 --- a/unit-conversion/src/features/unit-selector/unitSelectorSlice.js +++ b/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': - return { - ...state, - currentInputUnit: unitToSwitchTo, - }; - case 'setCurrentOutputUnit': - return { - ...state, - currentOutputUnit: unitToSwitchTo, - }; - default: - return state; - } + setCurrentInputUnit: (state, action) => { + const newUnit = action.payload; + return { + ...state, + currentInputUnit: newUnit, + }; + }, + setCurrentOutputUnit: (state, action) => { + const newUnit = action.payload; + return { + ...state, + currentOutputUnit: newUnit, + }; }, }, }); export default unitSelectorSlice; export const { - unitSelectorReducer, + setCurrentInputUnit, + setCurrentOutputUnit, } = unitSelectorSlice.actions; -export function getCurrentInputUnit(state) { +export function selectCurrentInputUnit(state) { return state.unitSelector.currentInputUnit; } -- GitLab