☰

react-redux connectでReact.memoを使用するにはどうすればいいですか? 質問する

tag-icon • tag-icon javascript reactjs redux
react-redux connectでReact.memoを使用するにはどうすればいいですか? 質問する

react-redux の関数をReact.memo使用するときに、React コンポーネントをラップする方法を知っている人はいますか?connect

たとえば、次のものをどのように変更しますか?

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コンポーネントが渡されることを想定しているため、次のエラーが発生します。

キャッチされないエラー: connect によって返される関数にコンポーネントを渡す必要があります。代わりに {"compare":null} が返されました

ベストアンサー1

React.memoは HOC に過ぎないので、次のように使用できます。

メモなし:

connect(
  mapStateToProps,
  mapDispatchToProps
)(Button);

メモ付き:

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

さらに、接続するためにラップします。(これは接続による解決策になるはずです)

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

次のように行いますwithRouter:withRouter(connect(...)())

おすすめ記事