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

Question

[Артем Штепенко]

Предположим есть такой компонент и нужно из 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>
    }
}

Answer 1

[Максим]

Чтобы изменить один компонент из другого, нужно либо достучаться до общего родителя и спустить props вниз, либо использовать redux (который делает тоже самое по сути).

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

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

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

Comments

[Артем Штепенко]

lifecycle метод componentWillReceiveProps вам поможет

эту ситуацию описать внутри componentWillReceiveProps в обычном if условии.

Да например можно через store передавать в компонент например что то типо state: "UPDATE", но тогда нужно после того как компонент будет отрисован опять менять store и ставить state: null потому что если другой компонент изменит store то ChangeMe все равно будет обновлен.