ダイナミックコンポーネントのアクションをディスパッチする信頼性の高い方法は何ですか？

Question

オブジェクトの異なるデータ型を表す要素を持つ状態があるとします。 各要素は、この種のパターンを達成するための信頼性の高い方法である何

export default connect(
    (state) => { 
     return { 
      events: getRegisteredEventsList(state).map(item => { 
      return { 
       title: item.get('name'), 
       actionButton: <a onClick={dispatch(someActionForThisSpecifiedItem(item))}>Custom Action</a> 
      } 
      }) 
    }, 
    (dispatch) => { 
     return { 

     } 
    } 
)(Dashboard) 

を派遣するさまざまなアクションを持つことができますか？ dispatchメソッドをコンテナの小道具に付ける必要がありますか？私はこの時点でそれを達成するにはどうすればよい

は次のとおりです。

export default connect(
    (state) => { 
     return { 
      events: getRegisteredEventsList(state).map(item => { 
      return { 
       title: item.get('name'), 
       actionButton: ({dispatch}) => <a 
        className={"btn btn-success"} 
        onClick={() => dispatch(someActionForThisSpecifiedItem(item))}>Go To</a> 
      } 
      }) 
    } 
)(Dashboard) 

追加する方法：

renderActionButtons() { 
    const { actionButtons, dispatch } = this.props 
    return actionButtons.map(button => renderComponent(button, { 
     dispatch 
    })); 
    } 

私のダミー部品に - 私のビューコンポーネントが今する必要があるため、関心事の分離の違反があります知っているとディスパッチプロパティを維持する

私はそれも同様に機能要求を減らすことができるように感じる。

Answer 1

私はこのような何かのために行くだろう、あなたの状態は、このようなものである簡略化のために言うことができます：

const items = [{ 
    name: 'abc', 
}, { 
    name: 'def', 
}]; 

それは

const Link = ({name, onClick}) => <a onClick={() => onClick(name)}>{name}</a>; 

レンダリングをクリックしますとき、単純にアクションをディスパッチするリンクコンポーネント次の小道具を受け入れるリンクコンポーネント：アイテムのリストとアクションをディスパッチできるonClick関数

const RenderLinks = ({ items, onClick }) => (
    <div> 
    {items.map(a => 
     <Link 
     name={a.name} 
     onClick={onClick} 
     />)} 
    </div> 
); 

const mapStateToProps = (state) => ({ 
    items, 
}); 

のonClick関数は、アクション

const mapDispatchToProps = (dispatch) => ({ 
    onClick: (name) => dispatch({type: `${name.toUpperCase()}_CLICKED`}), 
}); 

export default connect(mapStateToProps, mapDispatchToProps)(RenderLinks);