Redux:这种全能的动作创建者模式是不是错了？

Question

我是个新手。我不确定，使用下面的模式是错误的/愚蠢的吗？

import { createAction, handleActions } from "redux-actions";

const CHANGE_STATE = "appState/CHANGE_STATE";

export const changeState = createAction(CHANGE_STATE, (key, val) => ({ [key]: val }));

const initialState = {
    maxBodySize: 1920,
    isMaxBody: true,
    isMobile: false
};

export default handleActions(
    {
        [CHANGE_STATE]: (state, { payload: changedState }) => {
            const newState = {
                ...state,
                ...changedState
            };
            return newState;
        }
    },
    initialState
);

每个状态只能编辑一个actionCreator。如下所示：

// Can editable every state with 'changeState' action.
appState.changeState("isMaxBody", true);
appState.changeState("isMobile", true);
appState.changeState("maxBodySize", 960);

我可以继续使用这个方便的模式吗？

如果这个式样不好，请给我一些指示。

Answer 1

我可以继续使用这个方便的模式吗？

我不明白你为什么“不能”。从严格意义上讲，这似乎是完全有效的。

至于这是不是一个好主意，嗯，这是一个开放的意见，但我不建议使用这个模式。这里有几个原因：

• 你失去了“动作”和“状态修改”之间的抽象。很高兴能够说“执行此操作”，而不必担心实际的状态更改是什么。某些操作可能会修改状态的多个部分。所有这些都是从你那里抽象出来的，使它更具可控性和可测试性。同样，这可能不适用于中间件，因为类似的reasons.
• Modifying字符串属性“看起来很麻烦”，而且通常看起来很容易出错。如果你不小心在你的应用中某个属性名中输入了一个拼写错误，你将不会从工具中得到任何帮助。
• 与上面类似，你失去了任何利用静态类型(比如flow或TypeScript )的能力。在团队中编写了一个相当大的React/Redux应用程序后，我强烈建议使用像TypeScript这样的应用程序，这种模式在强/静态类型的应用程序中不能很好地工作。

这些是我的观点，来自我的经验。如果该模式对您和您正在尝试实现的目标工作得很好，您可能会发现它很好。

另外，如果你要使用这样的模式，我不明白你为什么不直接使用appState.changeState({isMaxBody: true});而不是appState.changeState("isMaxBody", true);。它看起来更干净了，至少更接近于更好的打字。