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

我想动作应该只将信息从一个地方传递到另一个地方。

然后我在想......也许逻辑应该存在于 LinesReducer 中。但是 Lines reducer 无法访问应用程序的全局状态，所以我不知道 width/height 新行应该有什么。

然后是WrapperContainer。容器具有有关所有应用程序状态的信息，因此循环遍历每一行并设置 ID（如果未设置）并更新它们的 width/height 和其他信息似乎是合理的。

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

这是正确的方法吗？我实际上想在另一个组件的 height/width 更改时更改行 width/height，这样容器对我来说最有意义。

编辑：

也许：

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

2) 在将行传递给道具时在容器中设置 width/height （但如果我最终想在另一个容器中呈现行，我将不得不在那里复制代码，除非我创建一些 "global" 处理传递行到容器中的组件道具的函数）

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

中了解更多信息

动作创建者可以通过添加一些中间件来了解您的当前状态 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.

React Redux 职责

React Redux Responsibilities

javascript

reactjs

immutable.js

redux

react-redux