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

Question

ownPropsのmapStateToPropsに基づいて、再選択を使ってメモを使ってセレクタを作成したいと思います。

Answer 1

react-reduxで提供されるconnectメソッドを使用してセレクタをコンポーネントに接続し、コンポーネント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; 

Howeve r、これはではありません。は、小道具を渡しているコンポーネントのインスタンスが複数ある場合は正しくメモします。その場合、セレクタは毎回異なる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; 

mapStateToProps引数が戻りを代わりにオブジェクトの機能を接続するために供給される場合、容器のインスタンスごとに個別mapStateToProps関数を作成するために使用されます。念頭に置いて

、新しいgetVisibleTodosセレクタを作成する機能makeMapStateToPropsを作成し、新しいセレクタへの排他的アクセス権を持っているmapStateToProps機能を返すことができます。VisibleTodosListの

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; 

今すぐ各インスタンスをコンテナはgetVisibleTodosセレクタを持つ独自のmapStateToProps関数を取得します。 Memoizationは、コンテナのレンダリング順序に関係なく正しく機能するようになりました。私はmakeGetVisibleTodos（にパラメータを追加したい場合はどのような）：

---

これはReselect documentation