Я бы как-то так организовал данные. Так же, почитайте про
нормализацию состояния.
// store
const initalState = {
treesById: {},
activeByTreeId: {},
};
const treesReducer = (state, action) => {
switch (action.type) {
// store.dispatch({ type: 'ADD_TREE', id: 'users', tree: [...] })
case 'ADD_TREE':
return {
...state,
treesById: {
...state.treesById,
[action.id]: action.tree,
},
};
// store.dispatch({ type: 'SET_ACTIVE', id: 'users', value: 5 })
case 'SET_ACTIVE':
return {
...state,
activeByTreeId: {
...state.activeByTreeId,
[action.id]: action.value,
},
};
default:
return state;
}
};
// dumb component aka presenter
const Tree = ({ items, active }) => {
return (
<div className="tree-items">
{items.map((item) => (
<TreeItem
key={item.id}
item={item}
isActive={item.id === active}
/>
))}
</div>
);
};
// smart component aka container
// (state, ownProps)
const mapStateToProps = ({ trees }, { treeId }) => {
return {
items: trees.treesById[treeId] || [],
active: trees.activeByTreeId[treeId],
};
};
// use in any component, e.g. Sidebar (presenter)
// props are passed from container
const Sidebar = () => {
return (
<div className="sidebar">
<TreeContainer treeId="sidebar" />
</div>
);
};