如何在 Redux 中处理重复的 action creator 样板

Question

过去几个月我一直在学习 React/Redux，我发现我的代码变得非常重复。我目前正在处理的应用程序有一堆页面——每个页面都会修改 Redux 存储中不同的状态部分。因此，我有一个 reducer 文件、action creator 文件和每个页面的容器。但我发现简单的操作 - 例如切换组件的可见性变得非常重复，因为我必须为每个单独的页面复制操作创建器，即

一个页面的动作创建者可能看起来像：

export const updateMapVisibility = (component, visibility) => {
    return {
        'type': 'UPDATE_MAP_VISIBILITY',
        'component': component,
        'visibility': visibility
    }
}

而一个单独的看起来像：

export const updatePubVisibility = (component, visibility) => {
    return {
        'type': 'UPDATE_PUB_VISIBILITY',
        'component': component,
        'visibility': visibility
    }
}

然后这个动作创建者被复制到一堆需要可切换组件的页面上。我考虑过的这种复制的一种可能解决方案是创建一个包含以下内容的基本动作创建者：

export const updateVisibility = (type, component, visibility) => {
    return {
        'type': type,
        'component': component,
        'visibility': visibility
    }
}

然后在我的容器中传入类型字符串，如下所示：

const mapDispatchToProps = (dispatch) => {
    return {
        'updateVisibility': (component, visibility) => {
            dispatch(updateVisibility('UPDATE_PUB_VISIBILITY', component, field))
        }
    }
}

但看了之后，我开始问自己，我是否违背了使用动作创建器的初衷。我想知道在 Redux 中是否有处理这种情况的通用做法或库。

Answer 1

与其将具有类型名称的部分推入您的组件 - 正如您所说，这感觉有点违背了目的 - 您可以创建一个返回动作创建者函数的函数（在此处插入 Inception 预告片噪音）：

const visibilityAction = type => (component, visibility) => ({
    'type': type,
    'component': component,
    'visibility': visibility
});

export const updateMapVisibility = visibilityAction("UPDATE_MAP_VISIBILITY");
export const updatePubVisibility = visibilityAction("UPDATE_PUB_VISIBILITY");

Redux docs 中的“生成动作创建者”下演示了一个类似（但更通用）的示例。但总的来说，Redux 不会为您做出很多此类决定，而是让您找到最适合您的特定用例的抽象。

编辑：为了最简洁，您还可以使用ES6 shorthand property names：

const visibilityAction = type => (component, visibility) => ({ type, component, visibility });

export const updateMapVisibility = visibilityAction("UPDATE_MAP_VISIBILITY");
export const updatePubVisibility = visibilityAction("UPDATE_PUB_VISIBILITY");