react + reduxを使用しています。
たとえばなのですが、ボタンがクリックされることにより、複数のactionを発行したいとします。
このとき、コンポーネントのonClickに以下のように書く方法があると思います。
js
1const TestComp = props => { 2 const handleClick = () => { 3 props.actionA(); 4 props.actionB(); 5 props.actionC(); 6 }; 7 return <button onClick={handleClick}>test button</button>; 8}; 9 10const mapDispatchToProps = dispatch => ({ 11 actionA() { 12 dispatch(actionA()); 13 } 14 actionB() { 15 dispatch(actionB()); 16 } 17 actionC() { 18 dispatch(actionC()); 19 } 20}); 21 22export default connect( 23 null, 24 mapDispatchToProps 25)(TestComp);
これではコンポーネントが長くなってしまうので、container側でまとめる方法もあると思います。
const TestComp = ({ handleClick }) => { return <button onClick={handleClick}>test button</button>; }; const mapDispatchToProps = dispatch => ({ handleClick() { dispatch(actionA()); dispatch(actionB()); dispatch(actionC()); } }); export default connect( null, mapDispatchToProps )(TestComp);
または、action typeに'ONCLICK'みたいなもの作成し、その一つのaction typeに対して複数のreducerが処理する、みたいな方法もあると思っています。
他にも方法はあるのかもしれませんが(あったらぜひ教えてください!)、どの実装パターンがもっとも良いと考えられるでしょうか?
状況によって最前の実装パターンが変わる場合には、どういう状況でどの実装がよいのか、など教えていただけると幸いです。
よろしくお願いします!
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。