React Redux责任

Question

几天前我开始学习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操作的逻辑？

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

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

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

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

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

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

编辑:

也许:

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

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

Answer 1

您应该将您的减速器保留为纯函数。这意味着，如果您使用相同的参数多次调用它们，它们将具有相同的预期结果，仅取决于参数。

\n

也就是说，您必须放置此类逻辑的地方称为操作创建者，这实际上是您的addLine函数。

\n

\n

动作创建器正是创建动作的\xe2\x80\x94函数。很容易将术语 \xe2\x80\x9caction\xe2\x80\x9d 和 \xe2\x80\x9caction 创建者、\xe2\x80\x9d 混淆，因此请尽力使用正确的术语。

\n

动作创建者也可以是异步的并且有副作用。

\n

\n

在文档中了解更多信息

\n

动作创建者可以通过添加一些中间件（例如redux-thunk ）来了解您当前的状态：

\n

\n

Redux Thunk 中间件允许您编写返回函数而不是操作的操作创建器。thunk 可用于延迟操作的分派，或仅在满足特定条件时分派。内部函数接收存储方法dispatch和getState作为参数。

\n

\n