Как использовать React.memo с response-redux connect?

Question

Кто-нибудь знает, как обернуть компонент React с React.memo, когда он использует функцию connect из response-redux?

Например, как бы вы изменили следующее?

let Button = (props: Props) => (
  <button onClick={props.click}>{props.value}</button>
);

Button = connect(
  mapStateToProps,
  mapDispatchToProps
)(Button);

Я пробовал:

let Button = React.memo((props: Props) => (
  <button onClick={props.click}>{props.value}</button>
));

Button = connect(
  mapStateToProps,
  mapDispatchToProps
)(Button);

Однако функция, возвращаемая connect, ожидает, что компонент будет передан, поэтому он выдает ошибки:

Uncaught Error: Вы должны передать компонент в функцию, возвращаемую через connect.Вместо этого получил {"сравнить": ноль}

Answer 1

Та же проблема здесь.Исправлено обновлением react-redux до версии 5.1.0.

Answer 2

React.memo - не что иное, как HOC, поэтому вы можете просто использовать:

Без напоминания:

connect(
  mapStateToProps,
  mapDispatchToProps
)(Button);

С памяткой:

connect(
  mapStateToProps,
  mapDispatchToProps
)(React.memo(Button));

И даже перенос для подключения: (Это должно быть решением с подключением)

React.memo(
  connect(
    mapStateToProps,
    mapDispatchToProps
  )(Button)
);

Как мы делаем с withRouter: withRouter(connect(...)())

Answer 3

Ваше решение должно работать (я не пробовал копировать, вот так), но вы также должны обновить react-redux до последней версии.

Кстати, я думаю, что правильная реализацияReact.memo во многих HOC будет самым близким к самому компоненту: цель React.memo состоит в том, чтобы проверить, все ли новые реквизиты, полученные компонентом, совпадают с последними реквизитами.Если какой-либо HOC преобразует или добавляет какие-либо реквизиты к компоненту - что connect делает путем сопоставления хранилища Redux с реквизитами, React.memo должен знать об этом, чтобы принять решение, обновлять ли компонент или нет.

Так что я бы пошел на что-то вроде этого:

//import what you need to import

const Component = props => <div>{/* do what you need to do here */}</div>

export default compose(
  connect(mapStateToProps, dispatchToProps),
  /* any other HOC*/
  React.memo
)(Component);

Answer 4

Codesandbox demo

Как говорится в сообщении об ошибке, вам нужно передать компонент в возвращаемую функцию из connect.
(что означает вторую пару () в connect()())

Когда React.Memo возвращает компонент, передайте его во вторую функцию connect.
Вот как вы можете это сделатьthis.

export const MemoizedDemoComponent = connect(mapStateToProps)(React.memo(DemoComponent);

---

Демонстрационный компонент:

import React from "react";
import { connect } from "react-redux";

const DemoComponent = props => (
  <div>
    <p>My demo component fueled by: {props.fuel}!</p>
    <p>Redux: {props.state}</p>
  </div>
);

const mapStateToProps = state => ({
  state: "your redux state..."
});

// create a version that only renders on prop changes
export const MemoizedDemoComponent = connect(mapStateToProps)(
  React.memo(DemoComponent)
);

В качестве рабочего примера проверьте также codesandbox .