Как правильно обновить комонент в react + redux?

Предположим есть такой компонент и нужно из X изменить ChangeMe (пример в общем абстрактный и естесвенно не рабочий)
class Test extends React.Component {
    render() {
        return (
            <App>
                <Parent>
                    <Child>
                        <Child>
                            <X/>
                        </Child>
                    </Child>
                </Parent>
                <AnotherComponent>
                    <ChangeMe/>
                </AnotherComponent>
            </App>

        );
    }
}


class Select extends React.Component {
    render() {
        return <select onChange={(value) => this.props.onChange(value)}>...data ..</select>
    }
}

Нужно на клик кнопки обновить компонент ChangeMe, который зависит от параметров выбранных в Select . Можно например добавить булевую переменную в reducer и менять по нажатию кнопки (костыль так себе:) ), но тогда есть другая проблема нужно добавить проверку в компоненте ChangeMe не изменились ли параметры что бы он лишний раз не обновлялся, но есть ситуации когда его нужно обновить даже когда парамерты не изменились. И Вопрос как это лучше сделать? Вариант с булевой переменной так себе ...
@connect(data => data)
class X extends React.Component {
    render() {
        return (<div>
            <Select data={data} onChange={(value) => this.props.dispatch({value1: value})}/>
            <Select data={data} onChange={(value) => this.props.dispatch({value4: value})}/>
            <Button onApply={() => dispatch()} type="button"/>
        </div>)
    }
}


@connect(data => data)
class ChangeMe extends React.Component {
    render() {
        return <div> {data.value}</div>
    }
}
  • Вопрос задан
  • 336 просмотров
Пригласить эксперта
Ответы на вопрос 1
maxfarseer
@maxfarseer
https://maxpfrontend.ru, обучаю реакту и компании
Чтобы изменить один компонент из другого, нужно либо достучаться до общего родителя и спустить props вниз, либо использовать redux (который делает тоже самое по сути).

В вашем случае, нужно через экшен из Х что-то изменять в том редьюсере, на который подписан ваш ChangeMe.

> нужно добавить проверку в компоненте ChangeMe не изменились ли параметры
lifecycle метод componentWillReceiveProps вам поможет

> но есть ситуации когда его нужно обновить даже когда парамерты не изменились
эту ситуацию описать внутри componentWillReceiveProps в обычном if условии.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы