大量のReduxアクションをコンテナからプレゼンテーション・コンポーネントに渡すにはどうすればよいですか？

Question

私は以下のコンテナコンポーネントをReduxストアに接続しています。私は、LayerListプレゼンテーションコンポーネントに6つのアクションを渡したいと思います。ここで

LayerListContainer.jsx

import React from 'react'; 
import { connect } from 'react-redux' 
import LayerList from '../components/LayerList' 

// import actions 
import * as LayerActions from '../actions/index' 

export const LayerListContainer = ({ layers }) => (
    <div> 
    <LayerList layers={layers} /* I want to pass actions to this component/> 
    </div> 
) 

const mapStateToProps = state => ({ 
    layers: state.layers 
}) 

// Use default export for the connected component (for app) 
export default connect(mapStateToProps, LayerActions)(LayerListContainer) 

は私が渡したいアクションは、次のとおりです。

アクション/ index.js

export const addLayer = (name) => ({ 
    type: ADD_LAYER, 
    id: nextLayerId++, 
    name, 
}) 

export const removeLayer = (id) => ({ 
    type: REMOVE_LAYER, 
    id 
}) 

export const toggleDragLayer = (id) => ({ 
    type: TOGGLE_DRAG_LAYER, 
    id 
}) 

export const moveLayerIndex = (id, destinationIndex) => ({ 
    type: MOVE_LAYER_INDEX, 
    id, 
    destinationIndex 
}) 

export const updateLayerColour = (id, colour) => ({ 
    type: UPDATE_LAYER_COLOUR, 
    id, 
    colour 
}) 

export const toggleLayerVisibility = (id) => ({ 
    type: TOGGLE_LAYER_VISIBILITY, 
    id 
}) 

おそらく、あなたはこのことを考慮していません大量の行動になる。そうでない場合は、コンテナコンポーネントから多くのアクションを渡す際の参考になるベストプラクティスを知りたいと思っています。

Answer 1

あなたはこの

export const LayerListContainer = props => (
    <div> 
    <LayerList {...props} /> 
    </div> 
); 

よう...スプレッド演算子の構文を使用してプレゼンテーションにあなたのコンテナのすべてのプロパティを渡すことができますまたはあなただけのアクションを渡したい場合は、bindActionCreators

import { bindActionCreators } from 'redux' 

// ... 

export const LayerListContainer = ({ layers, actions }) => (
    <div> 
    <LayerList layers={layers} actions={actions} /> 
    </div> 
); 

// .. 

const mapDispatchToProps = dispatch => ({ 
    actions: bindActionCreators(LayerActions, dispatch) 
}) 

export default connect(mapStateToProps, mapDispatchToProps)(LayerListContainer)