How to Log and Display Errors in React-Redux Applications?

// store.js 

import { createStore, combineReducers } from 'redux';

// Action Types
const SET_ERROR = 'SET_ERROR';
const CLEAR_ERROR = 'CLEAR_ERROR';

// Action Creators
export const setError = (error) => ({
    type: SET_ERROR,
    payload: error,
});

export const clearError = () => ({
    type: CLEAR_ERROR,
});

// Error Reducer
const initialErrorState = {
    message: '',
};

const errorReducer = (state = initialErrorState, action) => {
    switch (action.type) {
        case SET_ERROR:
            return { ...state, message: action.payload };
        case CLEAR_ERROR:
            return { ...state, message: '' };
        default:
            return state;
    }
};

// Root Reducer
const rootReducer = combineReducers({
    error: errorReducer,
});

// Store
const store = createStore(rootReducer);

export default store;

// App.js 

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import   { setError, clearError } from './store';
import axios from 'axios';
import './App.css';

const ErrorDisplay = () => {
  const dispatch = useDispatch();
  const error = useSelector(state => state.error.message);

  useEffect(() => {
    if (error) {
      const timer = setTimeout(() => {
        dispatch(clearError());
      }, 5000);
      return () => clearTimeout(timer);
    }
  }, [error, dispatch]);

  if (!error) return null;

  return (
    <div style={{ color: 'red', border: '1px solid red', 
    padding: '10px', margin: '10px 0' }}>
      <strong>Error:</strong> {error}
      <button onClick={() => dispatch(clearError())}
      style={{ marginLeft: '10px' }}>
        Dismiss
      </button>
    </div>
  );
};

const MainComponent = () => {
  const dispatch = useDispatch();

  const simulateApiCall = async () => {
    try {
      // Simulate an API call
      await axios.get('/api/example.com');
    } catch (error) {
      dispatch(setError('API call failed: ' + error.message));
    }
  };

  const handleButtonClick = () => {
    try {
      // Simulate an error
      throw new Error('Something went wrong!');
    } catch (error) {
      dispatch(setError(error.message));
    }
  };

  return (
    <div>
      <h1>Main Component</h1>
      <button onClick={handleButtonClick}>Trigger Error</button>
      <button onClick={simulateApiCall}>Simulate API Call</button>
    </div>
  );
};

const App = () => (
  <div className="App">
    <ErrorDisplay />
    <MainComponent />
  </div>
);

export default App;

// index.js 

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux'
import App from './App';
import store from './store';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store} >
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </Provider>
);