javascript - 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 Action

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) 与 LineReducer 对话

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 并且我想将它的宽度设置为与另一个组件的宽度/高度相同。

我想 Action 应该只将信息从一个地方传输到另一个地方。

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

然后是WrapperContainer。容器具有有关所有应用程序状态的信息，因此遍历每一行并设置 ID(如果未设置)并更新其宽度/高度和其他信息似乎是合理的。

但这对我来说似乎不对。我在考虑一个地方，它会收集有关应用程序全局状态的信息，然后它会根据该信息添加新行，并且没有其他任何东西会再次触及该行。除了另一个 Action 。

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

编辑:

也许:

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

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

Answer 1

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

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

Action creators are exactly that—functions that create actions. It's easy to conflate the terms “action” and “action creator,” so do your best to use the proper term.

Action creators can also be asynchronous and have side-effects.

在 docs 中了解更多信息

Action 创建者可以通过添加一些中间件(例如 redux-thunk)来了解您的当前状态:

Redux Thunk middleware allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. The inner function receives the store methods dispatch and getState as parameters.