如何将操作中的错误(Redux)发送到前端(React)？

// actionTypes.js
export const ADD_ERROR = 'ADD_ERROR';

// actions.js
export const addError = (error) => ({
  type: ADD_ERROR,
  payload: error,
});

// errorsReducer.js
import { ADD_ERROR } from './actionTypes';

const initialState = [];

const errorsReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_ERROR:
      return [...state, action.payload];
    default:
      return state;
  }
};

export default errorsReducer;

import React from 'react';
import { connect } from 'react-redux';
import { addError } from './actions';

class MyComponent extends React.Component {
  handleSomeError = () => {
    const error = 'Something went wrong!';
    this.props.addError(error);
  };

  render() {
    return (
      <div>
        {/* ... */}
        <button onClick={this.handleSomeError}>Trigger Error</button>
        {/* ... */}
      </div>
    );
  }
}

const mapDispatchToProps = {
  addError,
};

export default connect(null, mapDispatchToProps)(MyComponent);

import React from 'react';
import { connect } from 'react-redux';

class App extends React.Component {
  renderErrors = () => {
    return this.props.errors.map((error, index) => (
      <div key={index}>{error}</div>
    ));
  };

  render() {
    return (
      <div>
        {/* ... */}
        {this.renderErrors()}
        {/* ... */}
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  errors: state.errors,
});

export default connect(mapStateToProps)(App);