Функция connect() Redux, как правильно использовать?

Question

[fronter-up]

Добрый день! Объясните пожалуйста как сделать правильно на Redux?
Суть такова:
В приложении в сайдбаре есть селект, который обновляет отображения контента в сайдбаре, соответственно в главном компоненте сайдбра я делаю connect() компонента и диспатчу props.
Сейчас надо еще обновлять основной контент при change селекта.
Вопрос:
  1. Как правильно передавать изменнения в таком случае, чтобы обновлять основной контент (вопрос решится когда перенести connect() на уровень выше где есть сайдбар и main компонент, но правильно ли это)?
  2. Функции connect, их должно быть как можно меньше и должны быть на высших уровнях?
Объясните пожалуйста если я что-то не так понимаю.
Заранее спасибо!)

Comments

[alvvi]

Функции connect, их должно быть как можно меньше и должны быть на высших уровнях?

Нет, наоборот, чем ближе connect к месту где нужны данные -тем лучше. И об этом написано в доке даже.

[fronter-up]

Илья Ростопка, Может хоть вы тогда объясните, как пробросить прописи в другой компонент или подписать один компонент на изменения другого.

[alvvi]

fronter-up, компонент получает инфу из стора всегда с помощью mapStateToProps.
Изменяет данные в сторе компонент с помощью экшенов которые диспатчит либо через dispatch() либо с помощью mapDispatchToProps. Изменить стор можно из компонента A,B,C это вообще не важно. Если компонент A получает инфу из стора, и компонент B или C ее изменит задиспатчив экшен, компонент A перерендерится с новой инфой.
Компоненты не взаимодействую друг с другом, они взаимодействуют со стором.

Answer 1

[davidnum95]

Тут два варианта:
1. Подписаться на поле которое отвечает за текущий тип сайдбара в main компоненте, например

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. Подписаться на изменение селекта сайдбара в редьюсере main компонента:

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;
  }
};

Comments

[fronter-up]

Спасибо за ответ!
А если просто сделать в главном компоненте что-то типа

const mapStateToProps = (state) => {
    return {
        selectedCompany: state.selectedReducer,
        changeMain: state.mainContentReducer
    }
};

export default connect(mapStateToProps)(MainComponent)

[davidnum95]

fronter-up, это вам виднее как нужно:)

[fronter-up]

davidnum95, вопрос правильно ли так получать props?

[davidnum95]

fronter-up, да

Answer 2

[Олег Гамега]

1. Как правильно передавать изменнения в таком случае, чтобы обновлять основной контент (вопрос решится когда перенести connect() на уровень выше где есть сайдбар и main компонент, но правильно ли это)?

не уверен что я вас правильно понял но у вас одна стора на все приложение, где вы ее измените не имеет значения (в том смысле что не важно откуда вы дергаете action )

2. Функции connect, их должно быть как можно меньше и должны быть на высших уровнях?

если их экономить то у вас получатся фрагменты с овердофига пропертями которые очень не удобно использовать

Comments

[fronter-up]

где вы ее измените не имеет значения (в том смысле что не важно откуда вы дергаете action )

как тогда подписать другой компонент на изменения селекта?

[Олег Гамега]

во многом это и есть фишка redux - к примеру у вас есть компонент который подписан на стору
вы зашли в компонент настройки в котором поменяли аватар у юзера и он тут же поменяется и в Avatar

[fronter-up]

Могли бы пример навести?

[Олег Гамега]

fronter-up, кода который мог бы расскрыть не нарушая nda нет, но совсем простой пример реализация которого не принципиальна:
есть компонент фильмы, он отображает список карточек фильмов которые берет из редакса
есть компоенент тулбар который кроме всего прочего содержит в себе строку поиска и когда человек ищет что то то из компонента тулбар дергается функия поиска которая изменяет стору и тем самым изменятеся список фильмов

Answer 3

[Олег Драпеза]

Множество connect компонентов, которые передают из store минимально необходимое количество данных - это верный подход, в таком случае компонент, обернутый в connect, будет обновляться только тогда, когда изменились реальные данные, от которых он зависит.

По вашей проблеме:

Представим, что в store у вас есть 2 свойства:
1) options - массив строк для селекта
2) selectedOption - выбранная строка (пустая по дефолту)

И например одно действие - selectOption(option), для обновления selectedOption в store.

Далее условные обернутые компоненты:

// Ваш сайдбар обновится при каждом изменении selectedOption
connect((state, ownProps) => ({ selectedOption: state.selectedOption }))(SidebarComponent)

// Ваш селект обновляется в зависимости от изменения обоих свойств,
// и используя свойство onSelect может обновить selectedOption самостоятельно
connect(
  (state, ownProps) => ({ options: state.options, selectedOption: state.selectedOption }),
  (dispatch, ownProps) => ({ onSelect: (value) => dispatch(selectOption(value)) })
)(SelectComponent)

Comments

[fronter-up]

Спасибо за ответ!
Переспрошу еще у вас... если мне надо чтобы обновлялся главный компонент при изменении селекта в сайдбаре можно просто так написать и ничего больше?

const mapStateToProps = (state) => {
    return {
        selectedCompany: state.selectedReducer,
    }
};
export default connect(mapStateToProps)(MainComponent)

[Олег Драпеза]

Не ленитесь читать документацию, вы задаете вопросы на уровне - "как перебрать массив в javascript?"

Изменение каждого свойства, которое вы вернули в mapStateToProps, вызовет обновление компонента.

Если ваш селект меняет свойство state.selectedReducer, то да, можно так написать.

[fronter-up]

Олег Драпеза, Спасибо!