如何在React-Redux上将文件添加到状态

const initialState = {
  files: []
};

const fileReducer = (state = initialState, action) => {
  switch(action.type) {
    case 'ADD_FILE':
      return {
        ...state,
        files: [...state.files, action.payload]
      };
    default:
      return state;
  }
};

const addFile = (file) => ({
  type: 'ADD_FILE',
  payload: file
});

import { connect } from 'react-redux';
import { addFile } from '../actions/fileActions';

const FileComponent = ({ files, addFile }) => {
  // 文件添加操作
  const handleAddFile = (file) => {
    addFile(file);
  };

  // 渲染文件列表
  const renderFiles = () => {
    return files.map((file, index) => (
      <div key={index}>{file.name}</div>
    ));
  };

  return (
    <div>
      <button onClick={() => handleAddFile({ name: 'example.txt' })}>添加文件</button>
      {renderFiles()}
    </div>
  );
};

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

const mapDispatchToProps = (dispatch) => ({
  addFile: (file) => dispatch(addFile(file))
});

export default connect(mapStateToProps, mapDispatchToProps)(FileComponent);

import { createStore } from 'redux';
import { Provider } from 'react-redux';
import fileReducer from './reducers/fileReducer';
import FileComponent from './components/FileComponent';

const store = createStore(fileReducer);

const App = () => (
  <Provider store={store}>
    <FileComponent />
  </Provider>
);

export default App;