22

一部ownPropsのmapStateToProps.

4

1 に答える 1

31

これを行うには、 react-reduxconnectによって提供されるメソッドを使用してセレクターをコンポーネントに接続し、コンポーネントの props (ownProps) を 2 番目の引数としてセレクターに渡します。

container.js

import { connect } from 'react-redux';
import { getVisibleTodos } from './selectors';

...

const mapStateToProps = (state, props) => {
  return {
    todos: getVisibleTodos(state, props),
  };
};

const VisibleTodoList = connect(
  mapStateToProps,
)(TodoList);

export default VisibleTodoList;

その後、セレクターでこれらの小道具にアクセスできます

selectors.js

import { createSelector } from 'reselect';

const getVisibilityFilter = (state, props) =>
  state.todoLists[props.listId].visibilityFilter;

const getTodos = (state, props) =>
  state.todoLists[props.listId].todos;

const getVisibleTodos = createSelector(
  ...
);

export default getVisibleTodos;

ただし、小道具を渡すコンポーネントのインスタンスが複数ある場合、これは正しくメモ化されません。propsその場合、セレクターは毎回異なる引数を受け取るため、キャッシュされた値を返す代わりに常に再計算します。

props を渡してメモ化を保持しながら複数のコンポーネントでセレクターを共有するには、コンポーネントの各インスタンスにセレクターの独自のプライベート コピーが必要です。

これを行うには、呼び出されるたびにセレクターの新しいコピーを返す関数を作成します。

selectors.js

import { createSelector } from 'reselect';

const getVisibilityFilter = (state, props) =>
  state.todoLists[props.listId].visibilityFilter;

const getTodos = (state, props) =>
  state.todoLists[props.listId].todos;

const makeGetVisibleTodos = () => {
  return createSelector(
    ...
  );
}

export default makeGetVisibleTodos;

connect に指定されたmapStateToProps引数がオブジェクトではなく関数を返すmapStateToProps場合、コンテナのインスタンスごとに個別の関数を作成するために使用されます。

それを念頭に置いて、新しいセレクターmakeMapStateToPropsを作成し、新しいセレクターへの排他的アクセスを持つ関数をgetVisibleTodos返す関数を作成できます。mapStateToProps

import { connect } from 'react-redux';
import { makeGetVisibleTodos } from './selectors';

...

const makeMapStateToProps = () => {
  const getVisibleTodos = makeGetVisibleTodos();
  const mapStateToProps = (state, props) => {
    return {
      todos: getVisibleTodos(state, props),
    };
  };
  return mapStateToProps;
};

const VisibleTodoList = connect(
  makeMapStateToProps,
)(TodoList);

export default VisibleTodoList;

これで、コンテナーの各インスタンスは、プライベートセレクターを使用しVisibleTodosListて独自の関数を取得します。コンテナーのレンダリング順序に関係なく、メモ化が正しく機能するようになりました。mapStateToPropsgetVisibleTodos

これはReselect のドキュメントから改作(あからさまにコピー)されたものです。

于 2016-05-24T05:22:27.020 に答える