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) 在将行传递给道具时在容器中设置宽度/高度（但如果我最终想在另一个容器中渲染行，我将不得不在那里复制代码，除非我创建一些处理传递的“全局”函数容器中组件道具的行）

Answer 1

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

也就是说，你必须放置这种类型的逻辑的地方叫做action creator，它实际上是你的addLine函数。

动作创建者就是这样——创建动作的函数。很容易将术语“动作”和“动作创建者”混为一谈，因此请尽量使用正确的术语。

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

在docs了解更多信息

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

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