С React и Redux не получится сделать отдельные компоненты?

Question

[bernex]

Например у меня есть дерево и я хочу его использовать в 5 местах. Т.к. store один на все приложение получается редюсеры прийдется каждый раз писать разные?
Т.е. не получится сделать компонент и значения одного назначить на один ключ - тк рекомендуется не делать вложенностей в сторе.

const initialState = {
    treeOneActiveItem: 'none',
    treeItems  : [{id:1, name:'ddd', parent_id:0}],
    treeTwoActiveItem: 'none',
    treeTwoItems  : [{id:1, name:'ddd', parent_id:0}]
};

И соответственно view компоненты реакта пишу один раз, неужели остальное копипаситить? Или не понимаю что-то все еще. Привычна компонентная модель классами и событиями обычными, где все внутри класса.

Comments

[scrpcc1]

Я правильно понял, что дерево у Вас одно, а нужно одним компонентом отображать его разные ветви? Если да, то компонент может отражать ветвь, переданную ему через props, либо по id активной ветки, хранимой в state.

Answer 1

[Mikhail Osher]

Я бы как-то так организовал данные. Так же, почитайте про нормализацию состояния.

// 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>
  );
};