javascript - 如何在 Redux 中处理重复 Action 创建器样板

Question

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

一个页面的 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
    }
}

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

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))
        }
    }
}

但后来看着它，我开始问自己，我是否首先违背了使用 Action 创作者的目的。我想知道在 Redux 中是否有处理此类情况的通用做法或库。

Answer 1

与其将具有类型名称的部分推送到您的组件中——正如您所说，感觉有点违背了目的——您可以创建一个返回 Action 创建者函数的函数(在此处插入 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 中演示了一个类似(但更通用)的示例，在“生成 Action 创作者”下。但总的来说，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");