React-Redux -如何更新Id

// 引入React-Redux库
import { connect } from 'react-redux';

// 定义更新Id的action类型
const UPDATE_ID = 'UPDATE_ID';

// 定义更新Id的action创建函数
const updateId = (newId) => {
  return {
    type: UPDATE_ID,
    payload: newId
  };
};

// 定义Redux的reducer
const reducer = (state = { id: '' }, action) => {
  switch (action.type) {
    case UPDATE_ID:
      return {
        ...state,
        id: action.payload
      };
    default:
      return state;
  }
};

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

// 将更新Id的action创建函数映射到React组件的属性
const mapDispatchToProps = (dispatch) => {
  return {
    updateId: (newId) => dispatch(updateId(newId))
  };
};

// 定义React组件
const MyComponent = ({ id, updateId }) => {
  const handleUpdateId = () => {
    // 调用更新Id的action创建函数
    updateId('newId');
  };

  return (
    <div>
      <p>当前Id: {id}</p>
      <button onClick={handleUpdateId}>更新Id</button>
    </div>
  );
};

// 连接React组件到Redux的store
const ConnectedComponent = connect(mapStateToProps, mapDispatchToProps)(MyComponent);