react-redux中使用connect方式,修改reducer中的数据,页面不会重新渲染

2019年01月13日Web前端

项目中用到了react0.14.8,用到了react-redux,也遇到了在reducer中修改值,页面补充下渲染的问题。

一、问题描述

用简单的数据来描述下问题现象,先来看下页面上props和state绑定的数据:

const mapStateToProps = (state) => {
    return {
        searchData: state.search.data
    }
};

reducer中,原来是这么修改数据的,

case searchActionType.GETSEARCHLIST:
    let oData = action.data;
    // ...
    // 直接对oData进行操作
    return Object.assign({}, state, {
        data: oData
    });

实际redux中的数据也是被改变了,但是页面上使用到data的地方并没有重新渲染。

二、问题处理

因为修改前后,state没有改变(数组引用),所以导致react-redux认为state没有改变,所以没有去渲染页面,所以我们可以将return这么修改:

return Object.assign({}, state, {
    data: [...oData]
});

这样就可以了。