react.js - 组件连接redux后怎么复用而不会相互干扰

问题描述

问 题

如题，想问一下，如果我有一个组件连接到了redux，而我多次实例化使用了这个组件，怎么才能保证每个实例的状态互不干扰呢？

解决方案

首先,连接到Redux通过connect(mapStateToProps, mapDispatchToProps)(xxx)实现,我理解你复用的意思是,数据复用,但是你得明白,交给Redux管理的数据是唯一的,在数据改变的时候,每个connect都会调用一变,其中的mapStateToProps(state) 传入的state已经是你更改后的数据了;
至于你说的,想要每个实例状态互不影响,那么需要在当前组件自己的state上做文章.
比如:在组件constructor中 初始化state(这个state是组件自己的,跟redux没有直接关系)
this.state = {name:'',type:1};

在你需要在组件改变状态的时候,通过 this.setState = {name:'Jack',type:2} 去更改自己的state,
复用的数据从this.props.xxx中获取,做你自己的逻辑.

总结:
借助组件自己的state去完成本组件自己的逻辑控制,而统一管理的state交由Redux来管理.

猜想:
如果articlList 这份数据是你想要共享的数据,那么在组件实例又不想对他做改变的话,用state这么来做.
constructor(){
this.state = {articleList:this.props.articleList};
}
剩余组件内部操作等全部从 this.state.articleList 中获取,这样,你Redux中的articleList是不会受影响的.

希望能帮到你.

这篇关于react.js - 组件连接redux后怎么复用而不会相互干扰的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！