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。 Container有关于所有应用程序状态的信息，因此如果没有设置并更新它们的宽度/高度和其他信息，循环每一行并设置ID似乎是合理的。

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

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

修改

也许：

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

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

Answer 1

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

也就是说，你必须把这种逻辑放在哪个地方叫做动作创建者，这实际上是你的addLine函数。

动作创建者正是创建动作的功能。将“行动”和“行动创造者”这两个术语混为一谈很容易，所以尽量使用正确的术语。

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

在docs

中了解详情

动作创建者可以通过添加redux-thunk之类的中间件来了解您当前的状态：

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

React Redux责任

1 个答案: