connect() Redux function how to use correctly?

Question

JavaScript

Good afternoon! Please explain how to do it right on Redux?
The bottom line is this:
In the application, there is a select in the sidebar that updates the display of content in the sidebar, respectively, in the main component of the sidebar, I do connect () of the component and dispatch props.
Now we still need to update the main content when the select changes.
Question:
  1. How to correctly transfer changes in this case in order to update the main content (the question will be solved when to move connect() to a higher level where there is a sidebar and main component, but is this correct)?
  2. Connect functions, should they be as few as possible and should be at higher levels?
Please explain if I don't understand something.
Thanks in advance!)

Answer 1

There are two options:
1. Subscribe to the field that is responsible for the current sidebar type in the main component, for example

class MainComponent extends React.Component {
  static propTypes = {
    activeType: PropTypes.string,
  }

  static mapStateToProps(state) {
    return {
      activeType: state.sideBar.activeType,
    };
  }
// ....
export default connect(
  MainComponent.mapStateToProps,
  {})(MainComponent);

2. Subscribe to a change in the sidebar select in the reducer of the main component:

import { CHANGE_TYPE as SIDEBAR_CHANGE_TYPE } from '../SideBar/constants';

const initState = {
  activeType: undefined,
};

export default (state = initState, action) => {
  switch (action.type) {
    case SIDEBAR_CHANGE_TYPE:
      return {
        ...state,
        activeType: action.payload,
      };
    // ....
    default:
      return state;
  }
};