在使用redux时处理组件中的ID

// actions.js
export const updateID = (id) => {
  return {
    type: 'UPDATE_ID',
    payload: id
  }
}

// reducer.js
const initialState = {
  id: null
}

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'UPDATE_ID':
      return {
        ...state,
        id: action.payload
      }
    default:
      return state
  }
}

export default reducer

// Component.js
import React from 'react'
import { connect } from 'react-redux'
import { updateID } from './actions'

const Component = ({ id, updateID }) => {
  const handleButtonClick = () => {
    const newID = // 获取新的ID值
    updateID(newID)
  }

  return (
    <div>
      <p>ID: {id}</p>
      <button onClick={handleButtonClick}>更新ID</button>
    </div>
  )
}

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

const mapDispatchToProps = {
  updateID
}

export default connect(mapStateToProps, mapDispatchToProps)(Component)