Ответственность React Redux

Я начал изучать react-redux-immutable пару дней назад и до сих пор не совсем понимаю, как структурировать свое приложение. У меня есть php (фон Symfony/laravel MVC), поэтому мне нелегко понять некоторые концепции javascript.

1) У меня есть строки WrapperComponent:

export default function (props) {
    const style = {position: "relative"};
    const lines = props.lines;

    return (
        <div className='wrapper' style={style}>
            {lines.map(line => (
                <Line key={line.get("id")} {...line.toObject()} />
            ))}
            <Board />
        </div>
    );
}

2) Это связано с WrapperContainer

import Wrapper from '../components/WrapperComponent';

export default connect(
    function mapStateToProps(state) {
        return {
            lines: state.lines.map(line => {
                return line.set("board", {
                    width: state.board.get("width"),
                    height: state.board.get("height")
                });
            })
        };
    },
    function mapDispatchToProps(dispatch) {
        return {};
    }
)(Wrapper);

3) Затем есть действие addLine

export function addLine(type) {
    return {
        type: types.ADD_LINE,
        payload: {
            id: 3, top: 0, left: 0, diffX: 0, diffY: 0, type: type, board: {
                width: 0,
                height: 0
            }, active: false
        }
    };
}

4) Это говорит с LinesReducer

export default function LinesReducer(state = initialState, action) {
    switch (action.type) {
        case types.ADD_LINE:
            return state.push(
                Map(action.payload)
            );
        default:
            return state;
    }
}

5) Чтобы WrapperContainer мог прослушивать изменения состояния и перерисовывать строки

export default connect(
    function mapStateToProps(state) {
        return {
            lines: state.lines.map(line => {
                return line.set("board", {
                    width: state.board.get("width"),
                    height: state.board.get("height")
                });
            })
        };
    },
    function mapDispatchToProps(dispatch) {
        return {};
    }
)(Wrapper);

Теперь мой вопрос:

Где разместить логику действия addLine?

Когда я создаю строку, я хочу установить ее идентификатор, И я хочу установить ее ширину такой же, как ширина/высота другого компонента.

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

Потом думаю... может логика должна жить в LinesReducer. Но редуктор Lines не имеет доступа к глобальному состоянию приложения, поэтому я не знаю, какую ширину/высоту должна иметь новая строка.

Тогда есть WrapperContainer. Контейнер имеет информацию о состоянии всего приложения, поэтому кажется разумным перебирать каждую строку и устанавливать идентификаторы, если они не установлены, и обновлять их ширину/высоту и другую информацию.

Но мне это не кажется правильным. Я думал об одном месте, которое будет собирать информацию о глобальном состоянии приложения, а затем добавлять новую строку на основе этой информации, и ничто больше никогда не коснется этой строки снова. Кроме другого действия.

Это правильный подход? Я действительно хочу изменить ширину/высоту линии, когда изменяется высота/ширина другого компонента, поэтому контейнер имеет для меня наибольший смысл.

ИЗМЕНИТЬ:

Может быть:

1) установить идентификатор в действии, когда линия фактически создана (я просто не знаю, сколько строк уже существует, поэтому я действительно не знаю, какой идентификатор я должен установить)

2) установить ширину/высоту в контейнере, когда он передает строки в реквизит (но если я в конечном итоге захочу отобразить строки в другом контейнере, мне придется дублировать там код, если я не создам какую-то «глобальную» функцию, которая обрабатывает передачу строк в компонент реквизит в контейнерах)