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");

在{Generations Action Creators'下的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");

如何在Redux中处理重复动作创建器样板

1 个答案: