Update des toggle si la valeur dans redux est modifié

site/source/pages/Simulateurs/Dividendes.tsx

@@ -13,7 +13,7 @@ import { Radio, ToggleGroup } from '@/design-system/field'
 import { H2 } from '@/design-system/typography/heading'
 import { Body } from '@/design-system/typography/paragraphs'
 import { DottedName } from 'modele-social'
-import { useContext } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { useDispatch } from 'react-redux'
 import { ThemeContext } from 'styled-components'
@@ -64,12 +64,23 @@ function OptionBarèmeSwitch() {
 	const dispatch = useDispatch()
 	const engine = useEngine()
 	const dottedName = 'impôt . méthode de calcul' as DottedName
-	const currentOptionPFU = engine.evaluate(dottedName).nodeValue as string
+	const engineOptionPFU = engine.evaluate(dottedName).nodeValue as string
+
+	const [currentOptionPFU, setCurrentOptionPFU] = useState(engineOptionPFU)
+
+	useEffect(() => {
+		if (currentOptionPFU !== engineOptionPFU) {
+			setCurrentOptionPFU(engineOptionPFU)
+		}
+	}, [currentOptionPFU, engineOptionPFU])
 
 	return (
 		<ToggleGroup
-			defaultValue={currentOptionPFU}
-			onChange={(value) => dispatch(updateSituation(dottedName, `'${value}'`))}
+			value={currentOptionPFU}
+			onChange={(value) => {
+				setCurrentOptionPFU(value)
+				dispatch(updateSituation(dottedName, `'${value}'`))
+			}}
 		>
 			<Radio value="PFU">
 				<Trans>

site/source/pages/Simulateurs/Indépendant.tsx

@@ -13,6 +13,7 @@ import { Radio, ToggleGroup } from '@/design-system/field'
 import { DottedName } from 'modele-social'
 import { useDispatch } from 'react-redux'
 import { SelectSimulationYear } from '@/components/SelectSimulationYear'
+import { useEffect, useState } from 'react'
 
 export function IndépendantPLSimulation() {
 	return (
@@ -123,14 +124,23 @@ function IndépendantSimulationGoals({
 function ImpositionSwitch() {
 	const dispatch = useDispatch()
 	const engine = useEngine()
-	const currentImposition = engine.evaluate('entreprise . imposition').nodeValue
+	const engineImposition = engine.evaluate('entreprise . imposition')
+		.nodeValue as string
+	const [currentImposition, setCurrentImposition] = useState(engineImposition)
+
+	useEffect(() => {
+		if (currentImposition !== engineImposition) {
+			setCurrentImposition(engineImposition)
+		}
+	}, [currentImposition, engineImposition])
 
 	return (
 		<ToggleGroup
-			defaultValue={currentImposition as string}
-			onChange={(imposition) =>
+			value={currentImposition}
+			onChange={(imposition) => {
+				setCurrentImposition(imposition)
 				dispatch(updateSituation('entreprise . imposition', `'${imposition}'`))
-			}
+			}}
 		>
 			{(['IR', 'IS'] as const).map((imposition) => (
 				<span