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

前端之家收集整理的这篇文章主要介绍了[笔记]react-redux中使用connect方式,修改reducer中的数据,页面不会重新渲染前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

项目中用到了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({},{
    data: [...oData]
});

这样就可以了。

猜你在找的程序笔记相关文章