如何在react redux中渲染d3图表

// 安装依赖：
// npm install react-redux d3 react-d3-components

// 在根目录下创建Redux store
import { createStore } from 'redux';
import { Provider } from 'react-redux';

const initialState = {
  data: [5, 10, 15, 20, 25],
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'UPDATE_DATA':
      return { ...state, data: action.payload };
    default:
      return state;
  }
}

const store = createStore(reducer);

// 创建D3图表组件
import React from 'react';
import { connect } from 'react-redux';
import { BarChart } from 'react-d3-components';

class Chart extends React.Component {
  render() {
    const { data } = this.props;

    return (
      <BarChart
        data={{ label: 'Chart', values: data.map((value, index) => ({ x: index, y: value })) }}
        width={400}
        height={300}
        margin={{ top: 10, bottom: 50, left: 50, right: 10 }}
      />
    );
  }
}

// 连接Redux和React组件
const mapStateToProps = (state) => ({
  data: state.data,
});

const ConnectedChart = connect(mapStateToProps)(Chart);

// 在应用的根组件中渲染D3图表
function App() {
  return (
    <Provider store={store}>
      <ConnectedChart />
    </Provider>
  );
}

export default App;