Как изменить стили одного компонента при нажатии кнопки в другом?

Question

[MarEeeeee]

Есть два компонента, в одном хранится кнопка. Другой компонент хранит форму.
Требуется при нажатии на кнопку добавлять в стили формы visibility = "visible".
Для отслеживания нажатия на кнопку использую REDUX store. В момент клика булева переменная записывается в стор с значением true. Как отслеживать это изменение внутри компонента с формой ?

import {openForm} from "./redux/action"
import { connect } from 'react-redux';
const MyForm = ({style}) =>{
    const styles = {
        visibility:"hidden"
    }

    function onChangeHandler(){
        if(style){
            styles.visibility = "visible"
        }else{
            styles.visibility = "hidden"
        }
    }
    
   
    
    return(
        <form className = "form" onChange={onChangeHandler} style={styles}><form>

const mapStateToProps = state => {   
    console.log(state.items.formState);
    return {
        style: state.items.formState
    }
}

const mapDispatchToProps = {
    openForm:openForm
}

export default connect(mapStateToProps, mapDispatchToProps)(MyForm)

Компонент с кнопкой

const FixedElements  = ({style}) =>{
    function handleClick() {
        openForm(true);
      }
    return(
        <div>
           
            <button onClick={handleClick} type="button" id = "active_btn" class="btn btn-primary btn-order-call">Заказать звонок</button>
        </div>
    )
}

const mapStateToProps = state => {    
    // console.log(state.items.formState);
    return {
        style: state.items.formState
    }
}

const mapDispatchToProps = {
    openForm:openForm
}

export default connect(mapStateToProps, mapDispatchToProps)(FixedElements)

Answer 1

[Михаил Нестеров]

Насколько я понимаю, вам нужно просто показать-скрыть форму в зависимости от значения .
Если так, может быть будет проще делать что-нибудь такое -

{ formState && <form className = "form" onChange={onChangeHandler} style={styles}><form>}

и тогда не заморачиваться на передачу стилей вообще

Answer 2

[Gercci]

const что-то = useSelector(state => state.где лежит булевое значение)
Пример: const isPopup = useSelector(state => state.popup.isPopup)
Значение константы будет обновляться вместе с отслеживаемым значением