Обработка подобных событий в React-Redux, лучшая практика / подход

Question

Я работаю над своим первым проектом «Реакция-редукс», идея которого состоит в том, чтобы разместить на главной странице кучу изображений и видео. Я сделал компонент bar для установки сортировки, viewport et c. изображений.

Я застрял при обработке событий переключения кнопок. Их функциональные возможности почти идентичны, и, кроме того, они не работают должным образом, я чувствую, что что-то упустил, и мое решение, как правило, уродливо - похоже, что есть много стандартного кода, и это можно было бы сделать гораздо проще.

Панель настроек. js компонент:

import React from 'react';

const SettingsBar = ({ settings, onToggle }) => {
    return (
        <div className="settings-bar">
            <div className="settings">
                <ul>
                    <li onClick={(e) => onToggle("autoplay", !settings["autoplay"])} className={settings['autoplay'] ? "on" : "off"}>autoplay</li>
                    <li onClick={(e) => onToggle("pictures", !settings["pictures"])} className={settings['pictures'] ? "on" : "off"}>pictures</li>
                    <li onClick={(e) => onToggle("videos", !settings["videos"])} className={settings['videos'] ? "on" : "off"}>videos</li>
                    <li onClick={(e) => onToggle("sortposts", "top")} className={settings['sortposts'] === "top" ? "on" : "off"}>top</li>
                    <li onClick={(e) => onToggle("sortposts", "new")} className={settings['sortposts'] === "new" ? "on" : "off"}>new</li>
                    <li>about</li>
                </ul>
            </div>
            <div className="searchview">

                <ul>
                    <li onClick={(e) => onToggle("gridview", "big")}><i className={settings['gridview'] === "big" ? "iconon material-icons" : "off material-icons"}>border_all</i></li>
                    <li onClick={(e) => onToggle("gridview", "grid")}><i className={settings['gridview'] === "grid" ? "iconon material-icons" : "off material-icons"}>grid_on</i></li>
                </ul>
            </div >
        </div >
    );
};

export default SettingsBar;

Контейнер, SettingsBarContainer. js:

import { connect } from "react-redux";
import SettingsBar from "../components/layout/SettingsBar";
import { toggleSettings } from "../actions/settings";

function mapStateToProps(state, props) {
    return {
        settings: state.settings
    };
};

function mapDispatchToProps(dispatch, props) {
    console.log(props);
    return {
        onToggle: (type, flag) => dispatch(toggleSettings(type, flag)),

    };
};

const SettingsBarContainer = connect(
    mapStateToProps,
    mapDispatchToProps
)(SettingsBar);

export default SettingsBarContainer;

настройки. js действия:

import { TOGGLE_VIEW, TOGGLE_AUTOPLAY, TOGGLE_PICTURES, TOGGLE_VIDEOS, TOGGLE_SORT } from './index';

function toggleView(view) {
    return {
        type: TOGGLE_VIEW,
        view
    };
}

function toggleSort(sortposts) {
    return {
        type: TOGGLE_SORT,
        sortposts
    };
}

function toggleVideos(videos) {
    return {
        type: TOGGLE_VIDEOS,
        videos
    };
}

function togglePictures(pictures) {
    return {
        type: TOGGLE_PICTURES,
        pictures
    };
}

function toggleAutoplay(autoplay) {
    return {
        type: TOGGLE_AUTOPLAY,
        autoplay
    };
}


export function toggleSettings(setting, flag) {
    console.log("setting");
    console.log(setting)
    console.log("flag");
    console.log(flag);
    return (dispatch) => {
        switch (setting) {
            case "autoplay":
                dispatch(toggleAutoplay(flag));
                break;
            case "pictures":
                dispatch(togglePictures(flag));
                break;
            case "videos":
                dispatch(toggleVideos(flag));
                break;
            case "sortposts":
                dispatch(toggleSort(flag));
                break;
            case "gridview":
                dispatch(toggleView(flag));
                break;
            default:
                return;
        }
    };
}

настройки. js редуктор:

import { TOGGLE_VIEW, TOGGLE_AUTOPLAY, TOGGLE_PICTURES, TOGGLE_VIDEOS, TOGGLE_SORT } from '../actions/index';



export function settingsReducer(state = {
    autoplay: true,
    videos: true,
    pictures: true,
    gridview: 'big',
    sortposts: 'new'
}, action) {
    switch (action.type) {
        case TOGGLE_AUTOPLAY:
            return Object.assign({}, state, {
                autoplay: action.autoplay
            });
        case TOGGLE_VIEW:
            return Object.assign({}, state, {
                gridview: action.view
            });

        case TOGGLE_SORT:
            return Object.assign({}, state, {
                sort: action.sortposts
            });

        case TOGGLE_VIDEOS:
            if (state.pictures !== false) {
                return Object.assign({}, state, {
                    videos: action.videos
                });

            };
            break;

        case TOGGLE_PICTURES:
            if (state.videos !== false) {
                return Object.assign({}, state, {
                    pictures: action.pictures
                });
            };
            break;

        default:
            return state;
    }
}