React Redux:更新多个依赖属性上的组件

// actions.js
export const UPDATE_MULTIPLE_PROPERTIES = 'UPDATE_MULTIPLE_PROPERTIES';

export const updateMultipleProperties = (properties) => ({
  type: UPDATE_MULTIPLE_PROPERTIES,
  payload: properties,
});

// reducer.js
import { UPDATE_MULTIPLE_PROPERTIES } from './actions';

const initialState = {
  property1: '',
  property2: '',
  property3: '',
};

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case UPDATE_MULTIPLE_PROPERTIES:
      return {
        ...state,
        ...action.payload,
      };
    default:
      return state;
  }
};

export default rootReducer;

// MyComponent.js
import React from 'react';
import { connect } from 'react-redux';
import { updateMultipleProperties } from './actions';

class MyComponent extends React.Component {
  handleUpdate = () => {
    const { property1, property2, property3 } = this.props;
    this.props.updateMultipleProperties({ property1, property2, property3 });
  };

  render() {
    return (
      <div>
        <input
          type="text"
          value={this.props.property1}
          onChange={(e) => this.props.updateMultipleProperties({ property1: e.target.value })}
        />
        <input
          type="text"
          value={this.props.property2}
          onChange={(e) => this.props.updateMultipleProperties({ property2: e.target.value })}
        />
        <input
          type="text"
          value={this.props.property3}
          onChange={(e) => this.props.updateMultipleProperties({ property3: e.target.value })}
        />
        <button onClick={this.handleUpdate}>Update</button>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  property1: state.property1,
  property2: state.property2,
  property3: state.property3,
});

const mapDispatchToProps = {
  updateMultipleProperties,
};

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