如何在redux状态更改时呈现React组件？

npm install react-redux

import { connect } from 'react-redux';

// 示例的React组件
const MyComponent = ({ myValue, updateValue }) => {
  // 在这里使用myValue
  return (
    <div>
      <p>{myValue}</p>
      <button onClick={updateValue}>更新值</button>
    </div>
  );
};

// 将Redux状态映射到React组件的属性
const mapStateToProps = (state) => {
  return {
    myValue: state.myValue,
  };
};

// 将动作创建函数映射到React组件的属性
const mapDispatchToProps = (dispatch) => {
  return {
    updateValue: () => dispatch({ type: 'UPDATE_VALUE' }),
  };
};

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

import { Provider } from 'react-redux';
import { createStore } from 'redux';

// Redux状态和动作处理函数
const initialState = {
  myValue: '初始值',
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'UPDATE_VALUE':
      return {
        ...state,
        myValue: '更新后的值',
      };
    default:
      return state;
  }
};

// 创建Redux存储
const store = createStore(reducer);

// 将应用程序包装在Provider组件中
ReactDOM.render(
  <Provider store={store}>
    <MyComponent />
  </Provider>,
  document.getElementById('root')
);