react-redux 深监听（watchDeep）

• 项目里面遇到一个情况，redux获取的数据，然后点击改变数据源中的一个数据，不能引起redux的更新。

import React, { Component, Fragment } from 'react';
import { connect } from 'react-redux';
import { actionCreators } from '../store';
class Main extends Component {  
  render() {
    const { qrcodeReturnList } = this.props;
    return (
      <Fragment>
        {qrcodeReturnList.map(item => {
          return item.bookVos.map(ite => {
            return <span className="l-mr3"
              onClick={(e) => this.onChangeBookState(item.qrCodeNumber, 4, ite.bookBagDetailSysNo)}
            >{ite.bookState}</span>
          })
        })}
      </Fragment>
    )
  }
  // 改变数据中的bookState
  onChangeBookState = (qrcodeNumber, value, bookBagDetailSysNo) => {
    let list = this.props.qrcodeReturnList;
    
    for (let i = 0, len = list.length; i < len; i++) {

      if (qrcodeNumber === list[i].qrCodeNumber) {
        
        const arr = list[i].bookVos;

        for (let j = 0, leng = arr.length; j < leng; j++) {

          if (bookBagDetailSysNo === arr[j].bookBagDetailSysNo) {

            arr[j].bookState = value;

            break;
          }
        }
      }
    }
    
    this.props.changeQrcodeList(list)
  }
}
const mapState = (state) => ({ 
  qrcodeReturnList: state.flowBags.qrcodeReturnList, //获取数据
})
const mapDispatch = (dispatch) => ({
  changeQrcodeList(list) {
    dispatch(actionCreators.changeQrcodeList(list))
  },
})
export default connect(mapState, mapDispatch)(Main);

• 上面例子中，我从redux中获取数据qrcodeReturnList。这是一个列表1，列表1里面又有一个列表2，列表2中每一项有个bookState的值，开始都是2.然后我通过点击事件把它变为4.（这是我期望的表现）

  
  image.png

• 但是实际操作中点击并没有发生变化。
  但是我再mapState中监听一个对象或者数组就可以实现深监听了。
  

  image.png

import React, { Component, Fragment } from 'react';
import { connect } from 'react-redux';
import { actionCreators } from '../store';
class Main extends Component {  
  render() {
    const { qrcodeReturnList } = this.props;
    return (
      <Fragment>
        {qrcodeReturnList.map(item => {
          return item.bookVos.map(ite => {
            return <span className="l-mr3"
              onClick={(e) => this.onChangeBookState(item.qrCodeNumber, 4, ite.bookBagDetailSysNo)}
            >{ite.bookState}</span>
          })
        })}
      </Fragment>
    )
  }
  // 改变数据中的bookState
  onChangeBookState = (qrcodeNumber, value, bookBagDetailSysNo) => {
    let list = this.props.qrcodeReturnList;
    
    for (let i = 0, len = list.length; i < len; i++) {

      if (qrcodeNumber === list[i].qrCodeNumber) {
        
        const arr = list[i].bookVos;

        for (let j = 0, leng = arr.length; j < leng; j++) {

          if (bookBagDetailSysNo === arr[j].bookBagDetailSysNo) {

            arr[j].bookState = value;

            break;
          }
        }
      }
    }
    
    this.props.changeQrcodeList(list)
  }
}
const mapState = (state) => ({ 
  watchDeep: {}, // watchDeep随便写啥都行，这么写语义化一点。 值可以是对象或者数组或函数，不能是字符串，数字，null等
  qrcodeReturnList: state.flowBags.qrcodeReturnList, //获取数据
})
const mapDispatch = (dispatch) => ({
  changeQrcodeList(list) {
    dispatch(actionCreators.changeQrcodeList(list))
  },
})
export default connect(mapState, mapDispatch)(Main);

• 本人菜鸡研究源码失败了，但是通过这次对比，猜测，mapState中监听数据，如果不是来自redux本身的引用类型，会触发类似vue中的watch deep效果。