Реакция на изменение состояния состояния путем выполнения функции внутри компонента

Question

В настоящее время я впервые пытаюсь внедрить redux в мое реагирующее приложение.

Я создал редуктор, соединил реакцию с редуксом и настроил действие внутри компонента А - пока все хорошо. Но как мне прослушать изменение состояния внутри компонента B?

Примерно так:

changes.subscribe(value => {
   if (value === 1) {
       this.runSpecificFunction();
   } 
});

Другими словами, Я хочу подписаться на изменения и отреагировать для них, выполнив некоторые функции внутри компонента B. Как я могу это сделать?


То, что у меня пока есть для Компонента B - принимающего компонента:

const mapStateToProps = state => {
    return {
        nav: state.navigation
    };
};

export default connect(mapStateToProps)(withRouter(CartHolder));

Редуктор:

const initialState = {
    navigation: 0 // inactive
};

const rootReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'START_NAVIGATION':
            return {
                navigation: action.value
            };
        case 'STOP_NAVIGATION':
            return {
                navigation: action.value
            };
        default:
            return state
    }
};

export default rootReducer;

Answer 1

Любое изменение состояния (на основе избыточности или нет) приведет к повторной визуализации вашего дочернего компонента. Таким образом, использование крюка useEffect должно соответствовать вашему случаю использования (https://reactjs.org/docs/hooks-effect.html).

Примерно так в вашем примере:

const CartHolder = () => {
  React.useEffect(() => {
    myCallbackFunction(nav);
  }, [nav]);

  return (...);
};