Могу ли я подключить только функцию onClick к хранилищу Redux вместо подключения компонента кнопки?

Question

Я использую response-redux для подключения данных в моем Redux хранилище.Я обнаружил, как соединяться с селекторами (как mapStateToProps), чтобы данные были доступны в виде реквизитов в компонентах React, когда мне это нужно.

У меня есть компонент кнопки React, и я сделал для него реквизиты.Из других ответов я думаю, что вижу, как задать функцию onClick , чтобы у EventHandler был доступ к этим реквизитам.

Однако я понимаю, что сама по себе кнопка не нуждается в этих реквизитах, и онаэто просто событие onClick , которое нуждается в них.Есть ли способ подключить функцию onClick к хранилищу Redux вместо подключения компонента кнопки?

Я пробовал несколько способов, но я немного теряюсь между классы, функции, HOC, состав и т. д.

Обновление

Немного больше контекста: в любом пользовательском сеансе интересует интересующее меня состояние (география) для этой функции onClickизначально из базы данных, а потом почти никогда не менялось.Действие onClick, которого я хочу достичь, основано на данных географии.Если географические данные действительно изменятся, то почти все в DOM потребуется перерисовать.

---

Спасибо за ваши комментарии - я изучил больше и сумел создать скелетное приложение в codesandbox под названием TestOnClick .Я думаю, что это может быть один ответ на мой вопрос.

В приложении есть две кнопки

• , одна получает данные из магазина в качестве реквизита и вкладывает в них функцию onClick как@lecstor показал мне - я полагаю, это довольно стандартная штука, но я новичок в React
• , у другого нет такого реквизита, но он вызывает функцию onClick, которая сама использует getState () для получения тех же данных из хранилища

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

Насколько я понимаю, использование getState вместо connect означает, что Redux не уведомляет мою функцию о перезапуске.-представляется, если данные в магазине изменяются.Но я не рассматриваю это как проблему, потому что как функция onClick нет ничего, что требует рендеринга, и в любом случае почти весь DOM нужно будет перерисовывать в любом случае.Правильно ли я понял?

Обновление 2 Я пытаюсь использовать подход «Без реквизита» в моем реальном проекте и сталкиваюсь с круговыми зависимостями, поэтому, возможно, это неправильный ответ.Дальнейшее исследование впереди.

Answer 1

Поправьте меня, если я ошибаюсь: вы хотите передать минимальный реквизит, необходимый для вашего Button компонента.В идеале только одна функция, которая будет иметь доступ к state.geography.place, но не к состоянию.

Это возможно, если вы используете расширенные параметры подключения

const mapStateToProps = state => ({
  opsdetails: placeSelector(state)
});

const mapDispatchToProps = dispatch => ({
  alertPlace(opsdetails) {
    console.log(opsdetails);
    alert(
      `Place via WithPropsButton is ${opsdetails.OPSCode}) ${
        opsdetails.OPSName
      }`
    );
    //dispatch(YOUR_ACTION)
  }
});

const mergeProps = (stateProps, dispatchProps, ownProps) => ({
  ...ownProps,
  alertPlace: () => dispatchProps.alertPlace(stateProps.opsdetails)
});

export default connect(
  mapStateToProps,
  mapDispatchToProps,
  mergeProps
)(WithPropsButton);

WithPropsButton возвращает реквизиты, возвращаемые функцией mergeProps, то есть любыми собственными реквизитами, передаваемыми непосредственно ей, и функцией alertPlace.

, которая также позволяет упростить компонент и сделать его функцией без сохранения состояния:

const WithPropsButton = ({ alertPlace, ...remaining }) => (
  <button onClick={alertPlace} {...remaining}>
    With Props
  </button>
);

Следует помнить одну вещь:

alertPlace Функция prop будет воссоздана при каждом изменении state.geography.place, поэтому, если подключенный компонент с состоянием был чем-то сложным, вам бы хотелось избежатьслишком часто (не в данном случае с простой кнопкой) необходимы дальнейшие изменения.

Чтобы избежать повторного рендеринга, вы могли бы реализовать shouldComponentUpdate, который бы игнорировал alertPlace обновлений проп.

Я раздвоил ваши коды и коробку и реализовал то, о чем я здесь говорю.Пожалуйста, смотрите https://codesandbox.io/s/pk60228qk0

Answer 2

Вы можете использовать кнопку исключительно для вызова функции в вашем компоненте, которая считывает данные / функции из реквизита или состояния.

class Form extends Component {
  state = { name: "Fred" };

  onClick = () => {
    const { name } = this.state;
    const { userId, saveUser } = this.props;
    saveUser({ userId, name });
  };

  render() {
    return <button onClick={this.onClick}>Save Me</button>;
  }
}