Redux store数据变更时关联React Product组件未重新渲染问题

问题根因及修复方案 #

• Reducer未返回全新的state对象
  Redux的connect高阶组件默认对mapStateToProps返回的props做浅比较，仅当检测到属性引用变化时才会触发组件重渲染。如果你的cart reducer是直接修改原state对象的属性而非返回新对象，就会出现store数据更新但组件不重渲染的问题。
  错误写法示例：

// 错误：直接修改原对象引用，无引用变化不会触发重渲染
const cartReducer = (state = initialState, action) => {
  switch(action.type) {
    case 'UPDATE_CART':
      state.items = action.payload
      return state
  }
}

正确写法：

// 正确：返回全新的state对象，触发浅比较更新
const cartReducer = (state = initialState, action) => {
  switch(action.type) {
    case 'UPDATE_CART':
      return {
        ...state,
        items: action.payload
      }
  }
}

• 未在跳转返回的时机触发拉取购物车的方法
  你已经在dispatch映射中定义了getCartItems方法，但是当前Product组件没有在登录后跳转回来的时机调用该方法，导致store中的cart数据本身没有更新。同时你当前代码的onClickAdd方法中用的user变量没有从props注入，组件无法感知登录状态变化，需要同步修改mapStateToProps把用户状态也挂载到props。
  修复后的组件代码参考：

class Product extends React.Component {
  componentDidMount() {
    // 组件首次挂载时拉取数据
    this.props.getCartItems()
    // 监听页面聚焦事件，登录跳转返回时触发拉取
    this.unsubscribeFocus = this.props.navigation.addListener('focus', () => {
      if(this.props.user) {
        this.props.getCartItems()
      }
    })
  }

  componentWillUnmount() {
    // 卸载时移除监听避免内存泄漏
    this.unsubscribeFocus?.()
  }

  onClickAdd(){
    // 从props取user，组件可感知状态变化
    if(!this.props.user) {
      this.props.navigation.navigate('login')
      return;
    }
    this.addTaskTocart()
  }
  
  render() {
    return ()
  }
}
const mapStateToProps = (state) => {
  const { cart, user } = state;  
  return { cart, user }
};
    
const mapDispatchToProps = dispatch => {
  return {
    getCartItems: () => dispatch(getCartItems())
  };
}
    
export default connect(mapStateToProps, mapDispatchToProps)(Product)

• 导航栈缓存导致组件未重新挂载
  如果你使用的是React Navigation这类路由库，从登录页返回Product页时，Product页默认不会重新走挂载逻辑，仅监听focus事件才能在返回时触发数据更新。

内容的提问来源于stack exchange，提问作者shabaz-tech