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

2019年01月13日Web前端0

项目中用到了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]
});

这样就可以了。

Reactredux

目录