javascript - Redux:这种全能 Action 创建者模式是不是错了？

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

Can I continue to use this handy pattern

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

至于这是否是一个好主意，这可以商榷，但我不建议使用这种模式。原因如下:

• 您失去了“操作”和“状态修改”之间的抽象。很高兴能够说“执行此操作”，而不必担心实际的状态变化是什么。某些操作可能会修改状态的多个部分。所有这些都被从您手中抽象出来，使其更加受控和可测试。同样，由于类似的原因，这可能不适用于中间件等。
• 修改字符串属性“看起来很恶心”，而且通常看起来很容易出错。如果您不小心在应用中的某个属性名称中输入了拼写错误，您将无法从工具中获得任何帮助。
• 与上面类似，您将失去利用静态类型(例如流或 TypeScript)的任何能力。在团队中编写了一个相当大的 React/Redux 应用程序后，我强烈建议使用 TypeScript 之类的东西，而这种模式在强/静态类型应用程序中效果不佳。

这些是我的观点，来 self 的经验。如果该模式适合您以及您想要完成的任务，您可能会发现它就很好。

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