在我的react/redux项目中,我有一个对数组进行排序的操作:
case 'SORT_BY_NAME':
var newList = state.list; //.slice()
newList.sort(function(a,b){
if (a.name > b.name){
return 1;
} else if (a.name < b.name){
return -1;
} else {
return 0;
}
});
return Object.assign({}, state, { list: newList } );Run Code Online (Sandbox Code Playgroud)
初始渲染很好.但是排序操作未能导致我的组件的渲染方法再次被调用,因此UI中的数据从未出现排序.
我的项目的体系结构类似于Redux文档中的Reddit示例.但是,我也使用react-redux连接mapStateToProps.以下是我的组件设计的精简版:
class MyComponent extends React.Component{
render(){
<ul>
{list.map(item =>
<li key={item.id}>
{item.name}
</li>
)}
</ul>
}
}
function mapStateToProps(state){
return {
list: state.list;
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(MyComponent)Run Code Online (Sandbox Code Playgroud)
通过在mapStateToProps中设置断点,看起来好像正在设置/更改状态; 根据Chrome调试器中的Redux …