I want to reuse a react component and share common actions & reducers. My app dashboard has 3 Lists, where each List is fetched with different query param.
All 3 List components have the same props because all 3 of them are being re-rendered once I receive props from reducer.
Is there an dynamic way to display Lists based on query parameter? What I was thinking is to call different reducer in the action file based on the query param. Is there a better way?
Dashboard.js
const Dashboard = () => { return( <div> <List query={QUERY1} /> <List query={QUERY2} /> <List query={QUERY3} /> </div> ) } List.js
class List extends Component { constructor(props) { super(props); this.state = { items: [] }; } componentWillMount() { const { query } = this.props; this.props.onLoad(query); } componentWillReceiveProps() { const { items } = this.props; this.setState({ items }); } render() { return ( <div> { this.state.items.map((item, index) => <Item data={item} key={index}/> ) } </div> ) } } function mapStateToProps(state) { const { items } = state.item; return { items } } function mapDispatchToProps(dispatch) { return { onLoad: bindActionCreators(actions.load, dispatch) } } export default connect(mapStateToProps, mapDispatchToProps)(List); action.js
export function load(query) { return function (dispatch) { fetch(`//api.example.com/list?type=${query}&limit=10`) .then((response) => response.json()) .then((data) => { dispatch(setItems(data)); }); }; } reducer.js
export default function(state = [], action) { switch (action.type) { case actionTypes.ITEMS_SET: return setItems(state, action); } return state; } function setItems(state, action) { const { items } = action; return { ...state, items }; } 
