Aquí está el reductor -

 const reducer = produce((draft: State = initialState, action: actions.CompanyTypes) => { if (action.type === 'SELECT_COUNTRY') { draft.countryName = action.payload.countryName; } if (action.type === 'CHANGE_SELECTION') { const countriesData = transformData(countries) draft.countriesData = countriesData; } });

Estoy usando un paquete llamado react-simple-map aquí es donde estoy enviando:

 <Geography key={geo.rsmKey} geography={geo} onMouseEnter={() => { const countryName = geo.properties.NAME; dispatch({type: SELECT_COUNTRY, payload: { countryName }}); }} onMouseLeave={() => { dispatch({type: SELECT_COUNTRY, payload: {countryName: ""}}); }} style={{ default: { fill: countriesState!.countriesData[geo.properties.NAME]?.opacity ? "#34047d" : "#b9b9bd", outline: "none", opacity: Number(countriesState!.countriesData[geo.properties.NAME]?.opacity) + '%', }, hover: { fill: "#34047d", outline: "none", }, }} />

Aquí cuando estoy cambiando el estado no me sale nada -

 const MapView: React.FC<Props> = (props: React.PropsWithChildren<Props>) => { const [ countriesState, dispatch ] = useReducer(reducer, initialState); console.log(countriesState!.countryName); return ( ); };

¿Porqué es eso? Me encantaría aquí una solución.