能否在组件状态及构造函数中访问Redux属性与应用状态？

1. 能否在组件状态（Component State）内部访问Redux属性/应用状态？ #

当然可以，但要结合场景合理使用。组件状态是组件内部的局部状态，而Redux props是从全局store映射过来的，你可以在以下几种场景下访问并关联它们：

• 初始化组件状态时：在类组件的构造函数里，或者函数组件的useState初始化时，直接用Redux props的值来设置初始局部状态。比如：

  // 类组件示例
  constructor(props) {
    super(props);
    this.state = {
      localFilter: props.reduxFilters.defaultFilter
    };
  }
  
  // 函数组件示例
  const [localFilter, setLocalFilter] = useState(props.reduxFilters.defaultFilter);
  

• 同步Redux状态变化到局部状态：当Redux props更新时，如果你需要让局部状态跟着变化，可以用类组件的componentDidUpdate或者函数组件的useEffect来监听props变化，更新局部状态。比如：

  // 类组件
  componentDidUpdate(prevProps) {
    if (prevProps.reduxFilters !== this.props.reduxFilters) {
      this.setState({ localFilter: this.props.reduxFilters.defaultFilter });
    }
  }
  
  // 函数组件
  useEffect(() => {
    setLocalFilter(props.reduxFilters.defaultFilter);
  }, [props.reduxFilters]);
  

不过要注意：不要不必要地同步状态。如果某个状态可以直接通过Redux props使用，就没必要再存到组件局部状态里，否则容易出现状态不一致的问题，增加调试难度。

2. 能否通过this.props.contemplatedPiece实现Redux不同reducer状态间的UI交互？ #

完全可以，但要注意几个细节：

首先，在组件构造函数里是可以访问this.props.contemplatedPiece的——只要这个props已经通过mapStateToProps从Redux store映射过来了。你可以用它来初始化组件的局部状态，为后续的UI交互做准备。

但要注意：构造函数只会在组件初始化时执行一次，如果后续contemplatedPiece从Redux store更新了，构造函数不会重新运行，所以你需要用生命周期方法（类组件的componentDidUpdate，函数组件的useEffect）来监听这个props的变化，同步更新组件状态。

另外，关于不同reducer状态间的交互，这里给你两个思路：

• UI层面的交互：如果只是基于contemplatedPiece的属性，结合组件局部状态来控制UI显示（比如高亮、选中状态），直接在组件里使用this.props.contemplatedPiece是完全没问题的。比如：

  handleSelect = () => {
    this.setState(prevState => ({
      isSelected: !prevState.isSelected
    }));
    // 如果需要触发另一个reducer的状态更新，直接调用映射过来的action
    this.props.updateCart(this.props.contemplatedPiece);
  };
  

• 状态逻辑层面的交互：如果是复杂的状态依赖（比如需要根据contemplatedPiece的值去计算另一个reducer的状态），更推荐把逻辑放到Redux的action或者selector里（比如使用reselect库创建派生状态），这样状态逻辑更集中，也更容易维护。

举个完整的类组件示例：

class ClothingItem extends React.Component {
  constructor(props) {
    super(props);
    // 初始化时用Redux props设置局部状态
    this.state = {
      isInCart: props.cartItems.some(item => item.id === props.contemplatedPiece.id)
    };
  }

  // 监听contemplatedPiece或cartItems的变化，更新局部状态
  componentDidUpdate(prevProps) {
    if (prevProps.contemplatedPiece !== this.props.contemplatedPiece || prevProps.cartItems !== this.props.cartItems) {
      this.setState({
        isInCart: this.props.cartItems.some(item => item.id === this.props.contemplatedPiece.id)
      });
    }
  }

  handleToggleCart = () => {
    if (this.state.isInCart) {
      this.props.removeFromCart(this.props.contemplatedPiece.id);
    } else {
      this.props.addToCart(this.props.contemplatedPiece);
    }
  };

  render() {
    const { contemplatedPiece } = this.props;
    return (
      <div className={`item ${this.state.isInCart ? 'in-cart' : ''}`}>
        <h3>{contemplatedPiece.name}</h3>
        <button onClick={this.handleToggleCart}>
          {this.state.isInCart ? '从购物车移除' : '加入购物车'}
        </button>
      </div>
    );
  }
}

// 映射Redux状态和action到props
export default connect(
  state => ({
    contemplatedPiece: state.clothing.contemplatedPiece,
    cartItems: state.cart.items
  }),
  dispatch => ({
    addToCart: item => dispatch({ type: 'ADD_TO_CART', payload: item }),
    removeFromCart: itemId => dispatch({ type: 'REMOVE_FROM_CART', payload: itemId })
  })
)(ClothingItem);

内容的提问来源于stack exchange，提问作者flo527