Meu projeto Redux não renderiza e não sei onde está o erro

[eliasef]

Meu projeto Redux usa Redux-Thunk para trabalhar com uma API, não renderiza o elemento Header.js como deveria, vou mostrar os arquivos (são MUITO curtos). Não vou perder tempo mostrando a store e o App.js porque tenho certeza que está configurado corretamente. (mas se quiser eu compartilho)

Redux > actions:

export const FETCH_CHARACTERS_BEGIN = 'FETCH_CHARACTERS_BEGIN';

export const FETCH_CHARACTERS_SUCCESS = 'FETCH_CHARACTERS_SUCCESS';

export const FETCH_CHARACTERS_FAILURE = 'FETCH_CHARACTERS_FAILURE';

export const actionFetchCharactersBegin = () => ({
    type: FETCH_CHARACTERS_BEGIN,
});

export const actionFetchCharactersSucess = (characters) => ({
    type: FETCH_CHARACTERS_SUCCESS,
    payload: characters,
});

export const actionFetchCharactersFailure = (error) => ({
    type: FETCH_CHARACTERS_FAILURE,
    payload: error,
});

const API = 'https://rickandmortyapi.com/api/character';

export function fetchCharacters() {
    return async (dispatch) => {
        dispatch(actionFetchCharactersBegin());
        try {
            const response = await fetch(API);
            const { results } = await response.json();
            dispatch(actionFetchCharactersSucess(results));
            return results;
        } catch (error) {
            dispatch(actionFetchCharactersFailure(error));
        }
    };
};

redux > reducers:

import {
   FETCH_CHARACTERS_BEGIN,
   FETCH_CHARACTERS_SUCCESS,
   FETCH_CHARACTERS_FAILURE
} from '../actions';

const initialState = {
   characters: [],
   loading: false,
   error: null
}

export default function characterReducer(state = initialState, action) {
   switch (action.type) {
       case FETCH_CHARACTERS_BEGIN:
           return {
               ...state,
               loading: true,
               error: null
           };
       case FETCH_CHARACTERS_SUCCESS:
           return {
               ...state,
               loading: false,
               characters: [...state.characters, action.payload]
           };
       case FETCH_CHARACTERS_FAILURE:
           return {
               ...state,
               loading: false,
               error: action.payload,
               characters: []
           }
       default:
           return state;
   }
};

components > Header.js:

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchCharacters } from '../redux/actions';
import './Header.css'

function Header() {

    const characters = useSelector(state => state.characters);
    const loading = useSelector(state => state.loading);
    const error = useSelector(state => state.error);
    const dispatch = useDispatch();

    useEffect(() => {
        dispatch(fetchCharacters())
    }, [dispatch]);

    if (loading) {
        return <div>Loading...</div>
    };

    if (error) {
        return <div>{error.message}</div>
    };

    return (
        <div className='container-header'>
            <div className='header'>
                <div className='header_logo'>
                    <div className='logo_text'>
                        <h3>Rick And Morty Character's</h3>
                    </div>
                </div>
                <h1>Characters</h1>
                <ul>
                    {characters.map(character => ( 
                        <li key={character.id}>
                            {character.name} ({character.status})
                        </li>    
                    ))}
                </ul>
            </div>
        </div>
    )
}

export default Header;