如何将redux分派方法绑定到“哑巴”组件

// actions.js
export const updateData = (data) => {
  return {
    type: 'UPDATE_DATA',
    payload: data
  };
};

// reducers.js
const initialState = {
  data: null
};

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

export default dataReducer;

// App.js
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import dataReducer from './reducers';

const store = createStore(dataReducer);

const App = () => {
  return (
    <Provider store={store}>
      {/* 其他组件 */}
    </Provider>
  );
};

export default App;

// DumbComponent.js
import { connect } from 'react-redux';
import { updateData } from './actions';

const DumbComponent = ({ data, updateData }) => {
  // 使用data和updateData进行组件的渲染和交互逻辑

  return (
    {/* 组件的JSX代码 */}
  );
};

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

const mapDispatchToProps = {
  updateData
};

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