☰

reduxでreselectを使用してownPropsを取得するにはどうすればいいですか? 質問する

tag-icon • tag-icon reactjs redux reselect
reduxでreselectを使用してownPropsを取得するにはどうすればいいですか? 質問する

ownPropsいくつかに基づいて reselect を使用してメモ化を行うセレクターを作成したいと思いますmapStateToProps。

ベストアンサー1

これは、セレクタをコンポーネントに接続することで実現できますconnect。反応Redux次に、コンポーネントのプロパティ (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毎回異なる引数を受け取るため、キャッシュされた値を返すのではなく、常に再計算されます。

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

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

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;

mapStateToPropsconnect に指定された引数がオブジェクトではなく関数を返す場合、その引数は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

これは適応された（明らかにコピーされています）からドキュメントを再選択

おすすめ記事