web-dev-qa-db-ja.com

React.memoをreact-redux接続で使用するには？

React-reduxからconnect関数を使用しているときに、ReactコンポーネントをReact.memoでラップする方法を知っていますか？

たとえば、以下をどのように変更しますか？

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}を受け取りました

javascriptreactjsreduxconnect
19
Ryc

ここで同じ問題。アップグレードして修正react-reduxバージョン5.1.0へ。

4
Maxime Chéramy

_React.memo_はHOCにすぎないため、次のように使用できます。

メモなし：

_connect(
  mapStateToProps,
  mapDispatchToProps
)(Button);
_

メモ付き：

_connect(
  mapStateToProps,
  mapDispatchToProps
)(React.memo(Button));
_

さらに、接続するためのラップ：（これは接続の解決策である必要があります）

_React.memo(
  connect(
    mapStateToProps,
    mapDispatchToProps
  )(Button)
);
_

withRouterで行うように：withRouter(connect(...)())

4
Bhojendra Rauniyar

あなたのソリューションは動作するはずです（私はそのようにコピー＆ペーストしようとしませんでした）が、react-reduxを最新バージョンに更新する必要もあります。

ちなみに、多くのHOC内でのReact.memoの適切な実装は、コンポーネント自体に最も近いものになると思います。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);
3
arnaudambro

Codesandboxデモ

エラーメッセージが示すように、connectから返された関数にコンポーネントを渡す必要があります。
（これは、connect()()の（）の2番目のペアを意味します）

なので React.Memoはコンポーネントを返し、connectの2番目の関数に渡します。
これを行う方法を次に示します。

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 も確認してください。

1
Roy Scheffers