redux更新state，视图未更新

Question

问题描述

index.js页面中点击一个商品，dispatch更新store中state的已点商品数组，tabbar.js组件中bagde徽标不是时时更新，能不能时时更新？

相关代码

index.js页面部分代码

// 点击商品，dispatch更新state已点商品数组orderList
this.props.dispatch({
  type: 'application/updateOrder',
  payload: {
    dish: list[index]
  }
});

// connect，redux和页面
let mapStateToProp = state => {
  let {orderList} = state.application;
  return {orderList};
};

export default connect(mapStateToProp)(Home);

store.js文件

export default {
  namespace: 'application',
  state: {
    orderList: []
  },
  reducers: {
    // 更新state
    updateOrder(state, {payload: data}) {
      let stateCopy = Object.assign({}, state);
      let {dish} = data;
      let orderIndex = stateCopy.orderList.findIndex(item => {
        return dish.id === item.id;
      });
      if (orderIndex === -1) {
        stateCopy.orderList.push(data.dish);
      } else {
        ++stateCopy.orderList[orderIndex].orderNum;
      }
      return stateCopy;
    }
  }
};

tabbar.js组件部分代码

render() {
    // badge徽标html
    let badgeHtml = (id, icon) => {
      let orderNumber = this.props.orderList.length;
      if (id !== 2 || orderNumber === 0) {
        return <img src={icon} alt="" className="weui-tabbar__icon" />;
      } else {
        return (
          <span className="weui-tabbar__badge">
            <img src={icon} alt="" className="weui-tabbar__icon" />
            <span className="weui-badge">{orderNumber}</span>
          </span>
        );
      }
    };

    return (
      <div className="weui-tabbar">
        {this.state.barList.map((bar, index) => {
          return (
            <NavLink
              to={bar.url}
              className="weui-tabbar__item"
              activeClassName="weui-bar__item_on"
              key={bar.id}
              exact
            >
              {badgeHtml(bar.id, bar.icon)}
              <p className="weui-tabbar__label">{bar.name}</p>
            </NavLink>
          );
        })}
      </div>
    );
  }

let mapStateToProp = state => {
  let {orderList} = state.application;
  return {
    orderList
  };
};

export default withRouter(connect(mapStateToProp)(Tabbar));

你期待的结果是什么？实际看到的错误信息又是什么？

点击商品后，切换路由后徽标才更新，能不能点击商品，徽标时时更新？
小白求解谢谢

Answer 1

只看组件的render好像没什么问题，是不是用了PureComponent或者自己加了shouldComponentUpdate

Answer 2

应该需要改写<NavLink/>里的逻辑