Компоненты не перерисовываются после изменения состояния Redux

import React from 'react';
import {useDispatch} from "react-redux";
import {markAllCompleted} from "../actions";
 
 
const Footer = () => {
    const dispatch = useDispatch();
    return (
        <footer className="footer">
            <div className="actions">
                <h5>Actions</h5>
                <button className="button"
                        onClick={() => dispatch(markAllCompleted())}>
                    Mark All Completed
                </button>
                <button className="button">
                    Clear Completed
                </button>
            </div>
 
            <RemainingTodos/>
            <StatusFilter/>
            <ColorFilters/>
        </footer>
    )
}
 
export default Footer

import React, {useState} from 'react';
import {ReactComponent as TimesSolid} from './times-solid.svg';
import {markCompleted, deleteToDo, addColor} from "../actions";
import {useDispatch, useSelector} from "react-redux";
 
 
const TodoListItem = ({todo}) => {
    const dispatch = useDispatch();
    const {text, id} = todo;
    const completed = useSelector(state => state.todos.find(item => item.id === id).completed);
    const colorNames = useSelector(state => state.filters.filterColors);
    const [innerSelectColor, setInnerSelectColor] = useState("");
 
    console.log(completed);
    console.log("render TodoListItem");
 
    const colorSetter = (e) => {
        dispatch(addColor(id, e.target.value));
        setInnerSelectColor(e.target.value);
    }
 
    return (
        <li>
            <div className="view">
                <div className="segment label">
                    <input className="toggle"
                           type="checkbox"
                           defaultChecked={completed}
                           onClick={() => dispatch(markCompleted(id, completed))}
                    />
                    <div className="todo-text">{text}</div>
                </div>
 
                <div className="segment buttons">
                    <select className="colorPicker"
                            onChange={colorSetter}
                            style={{color: innerSelectColor}}
                    >
                        {colorNames.map((color, index) =>
                            <option key={index} value={color}>{color.toUpperCase()}</option>)}
                    </select>
 
                    <button className="destroy" onClick={() => dispatch(deleteToDo(id))}>
                        <TimesSolid/>
                    </button>
                </div>
            </div>
        </li>
    )
}
 
export default React.memo(TodoListItem);

import {initialToDosState} from "../initialState";
import {constants} from "../constants";
import {v4 as uuidv4} from 'uuid';
 
export default function todosReducer(state = initialToDosState, action) {
    switch (action.type) {
        // another cases ...
        case constants.markAllCompleted:
            return state.map(todo => ({...todo, completed: action.payload}));
        default:
            return state;
    }
}

<Form.Item label="Двустворчатая">
  <Checkbox checked={isDouble} onChange={(e)=> dispatch(changeIsDouble(e.target.checked))} />
</Form.Item>