小道具をセレクタに渡してその小道具に基づいてフィルタをかける

Question

セレクタにクリックされたアイテムの内容を取得できるように、セレクタに小道具を渡す必要があります。しかし、私は小道具を渡すことができませんでした。私はこの方法を試してみましたが、ここでは何の成功

const mapStateToProps = createStructuredSelector({ 
    features: selectFeatures(), 
    getFeatureToEditById: selectFeatureToEditById(), 
}); 

handleFeatureEdit = (event, feature) => { 
    event.preventDefault(); 
    console.log("feature handle", feature); 
    const dialog = (
    <FeatureEditDialog 
     feature={feature} 
     featureToEdit={selectFeatureToEditById(feature)} 
     onClose={() => this.props.hideDialog(null)} 
    /> 
); 
    this.props.showDialog(dialog); 
}; 

selectors.js 

const selectFeatureState = state => state.get("featureReducer"); 

const selectFeatureById = (_, props) => { 
    console.log("props", _, props); #if i get the id of feature here 
    # i could then filter based on that id from below selector and show 
    # the result in FeatureEditDialog component 
}; 

const selectFeatureToEditById =() => 
    createSelector(
    selectFeatureState, 
    selectFeatureById, 
    (features, featureId) => { 
     console.log("features", features, featureId); 
    } 
); 

は完全なコードのための要旨

https://gist.github.com/MilanRgm/80fe18e3f25993a27dfd0bbd0ede3c20

Answer 1

は、単にあなたのmapStateToPropsからあなたのセレクタに状態や小道具の両方に合格しません。

mapStateToProps関数としてセレクタを直接使用すると、mapStateは同じ引数を受け取ります。stateとownProps（接続コンポーネントに小道具が設定されています）。

簡単な例：あなたは、セレクタをマッピングするようにいくつかの奇妙な事をやっているしかし

// simple selector 
export const getSomethingFromState = (state, { id }) => state.stuff[id] 
// reselect selector 
export const getStuff = createSelector(
    getSomethingFromState, 
    (stuff) => stuff 
) 

// use it as mapDispatchToProps 
const mapDispatchToProps = getSomethingFromState 

const MyContainer = connect(mapDispatchToProps)(MyComponent) 

// and set id as an own prop in the container when rendering 
<MyContainer id='foo' /> 

が後でそれを再利用します。この方法では動作しません。少なくとも、そのように使用するつもりはありません。

セレクタを使用して状態のスライスを取得し、それを小道具としてあなたのコンポーネントに渡します。状態が変わるたびにセレクタが再実行されます（再選択のおかげでキャッシュがいくつかあります）。コンポーネントが実際にReduxから取得しているものが実際に変更された場合、再描画されます。

あなたのFeatureEditDialogコンポーネントも同様に接続する必要があります。また、自分のconnect呼び出しでprops（どの機能、どのidなど）を使用するだけで、Redux状態から必要なものを取得することができます。

this.props.showDialog(dialog);も大きなコードの匂いです。 ;）