javascript – 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",function mapdispatchToProps(dispatch) {
        return {};
    }
)(Wrapper);

现在我的问题是：

我在哪里提出有关addLine操作的逻辑？

当我创建一行时,我想设置它的ID并且我想将其宽度设置为与另一个组件的宽度/高度相同.

我想这些行动应该只将信息从一个地方转移到另一个地方.

然后我在想……也许逻辑应该存在于LinesReducer中.但是Lines reducer无法访问应用程序的全局状态,所以我不知道新行的宽度/高度应该是多少.

然后是WrapperContainer.容器具有关于所有应用程序的状态的信息,因此如果没有设置并且更新它们的宽度/高度和其他信息,则循环每一行并设置ID似乎是合理的.

但这对我来说似乎不对.我正在考虑一个可以收集有关应用程序全局状态信息的地方,然后它会根据该信息添加新行,而其他任何东西都不会再触及该行.除了另一个动作.

这是正确的方法吗？我实际上想要在另一个组件的高度/宽度发生变化时更改线宽/高度,这样容器对我来说最有意义.

编辑：

也许：

1)在实际创建行时设置ID(我只是不知道已经有多少行,所以我真的不知道应该设置什么ID)

2)在将行传递给props时设置容器中的宽度/高度(但如果我最终想要在另一个容器中渲染行,我将不得不在那里复制代码,除非我创建一些处理将行传递给组件的“全局”函数容器中的道具)