Состояние обработки Redux с флажками

Question

Поработав с React в течение некоторого времени, я пытался понять Redux немного позже, и в настоящее время я застрял в проблеме обработки нескольких флажков.Вкратце, есть список задач, созданный с помощью приложения Create-React-app, в котором я установил 3 флажка (по умолчанию установлено), которые должны отображать / скрывать задачи по приоритету (высокий, нормальный, низкий).

Я пыталсяобрабатывая его с привязкой действий к флажкам, чтобы показать / скрыть задачи с разными приоритетами.

Компонент флажка (Checkbox.js)

import React from 'react'
import PropTypes from 'prop-types'

const Checkbox = ({ checked, children, onChange }) => (
  <span>
    <input type = "checkbox" 
       onChange={onChange}
       defaultChecked={true}
       style={{
          marginLeft: '4px',
       }}
       className={'checkbox'}
    />
    {children}
  </span>   
)

Checkbox.propTypes = {
  checked: PropTypes.bool.isRequired,
  children: PropTypes.node.isRequired,
  onChange: PropTypes.func.isRequired
}

export default Checkbox

Контейнер флажка (Filtercheckbox.js)

import { connect } from 'react-redux'
import { setVisibilityFilter } from '../actions'
import Checkbox from '../components/Checkbox'

const mapStateToProps = (state, ownProps) => ({
  checked: ownProps.filter === state.visibilityFilter
})

const mapDispatchToProps = (dispatch, ownProps) => ({
  onChange: (e) =>  {
                    if(e.target.checked) dispatch(setVisibilityFilter(ownProps.filter[0]))
                    else dispatch(setVisibilityFilter(ownProps.filter[1]))
                }
})

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Checkbox)

Флажки в родительском компоненте

<FilterCheckbox filter={[VisibilityFilters.SHOW_HIGH, VisibilityFilters.HIDE_HIGH]}>
        High
</FilterCheckbox>
<FilterCheckbox filter={[VisibilityFilters.SHOW_NORMAL, VisibilityFilters.HIDE_NORMAL]}>
        Normal
</FilterCheckbox>
<FilterCheckbox filter={[VisibilityFilters.SHOW_LOW, VisibilityFilters.HIDE_LOW]}>
        Low
</FilterCheckbox>

Контейнер Todolist

function getUnique(arr, comp) {
  const unique = arr
  .map(e => e[comp])
  .map((e, i, final) => final.indexOf(e) === i && i)
  .filter(e => arr[e]).map(e => arr[e]);
  return unique;
}

const getVisibleTodos = (todos, filter) => {
  switch (filter) {
    case VisibilityFilters.SHOW_ALL:
      return todos
    case VisibilityFilters.SHOW_COMPLETED:
      return todos.filter(t => t.completed)
    case VisibilityFilters.SHOW_ACTIVE:
      return todos.filter(t => !t.completed)
    case VisibilityFilters.SHOW_HIGH:
      return getUnique(todos.concat(todos.filter(t => t.priority === 'High')), 'id')
    case VisibilityFilters.HIDE_HIGH:
        return todos.filter(t => t.priority !== 'High')
    case VisibilityFilters.SHOW_NORMAL:
        return getUnique(todos.concat(todos.filter(t => t.priority === 'Normal')), 'id')
    case VisibilityFilters.HIDE_NORMAL:
        return todos.filter(t => t.priority !== 'Normal')
    case VisibilityFilters.SHOW_LOW:
      return getUnique(todos.concat(todos.filter(t => t.priority === 'Low')), 'id')
    case VisibilityFilters.HIDE_LOW:
        return todos.filter(t => t.priority !== 'Low')
    default:
      throw new Error('Unknown filter: ' + filter)
  }
}

const mapStateToProps = state => ({
  todos: getVisibleTodos(state.todos, state.visibilityFilter)
})

const mapDispatchToProps = dispatch => ({
  toggleTodo: id => dispatch(toggleTodo(id)),
  choosePriority: (id, value) => dispatch(choosePriority(id, value))
})

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

Редуктор, отправляющий новый фильтр видимости в состояние

import { VisibilityFilters } from '../actions'

const visibilityFilter = (state = VisibilityFilters.SHOW_ALL, action) => {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
        return action.filter
    default:
      return state
  }
}

export default visibilityFilter

Когда флажок установлен, функция getVisibleTodos в контейнере Todolist в основном просто объединяет два массива (все задачи с задачами).определенного приоритета) и возвращает массив уникальных элементов.

Проблема заключается в том, что 2 флажка сняты один за другим, в этом случае у нас есть нежелательные задачи (например, если у нас есть задачи с обычным и высоким приоритетом)в списке и снимите флажок Обычный, а затем Низкий, нормальные появятся в списке).