react+redux框架中使用react-redux前后组件获取值方式对比

最新推荐文章于 2023-06-08 15:31:15 发布

小明小茗

最新推荐文章于 2023-06-08 15:31:15 发布

阅读量888

点赞数

本文链接：https://blog.youkuaiyun.com/qq_45364815/article/details/104528153

版权

本文对比了在react+redux框架下，使用react-redux前后的组件获取值方式。在使用react-redux前，需要通过引入仓库、getState()和subscribe来监听数据变化。而使用react-redux后，通过provide和connect方法，可以更方便地获取和操作仓库中的数据，无需手动监听和移除监听。connect方法的mapStateToProps和mapDispatchToProps函数帮助我们将仓库状态和事件映射到组件的props上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react+redux框架中使用react-redux前后组件获取值方式对比,以todolist为例。

使用react-redux前：1.创建仓库
2.配置好仓库使用的状态
3.配置修改状态的事件

const store = createStore(reducer, initialState)

组件想要及时获得更新后的数据，然后更新视图，需要引入仓库，用getState()方法获的仓库数据，然后使用subscribe订阅方法，在组件中监听数据的变化，

        constructor(props) {
super(props);
this.state = {
  list: store.getState().list,
  status: store.getState().status
}
}

	componentDidMount(){
		    store.subscribe(()=>{
		      console.log(store.getState().list);
		      this.setState({
		        list: store.getState().list,
		      });
		    })
		    }

使用react-redux 后：1.创建仓库
2.配置好仓库使用的状态
3.配置修改状态的事件
我们可以使用其为我们提供的provide和connect方法
通过用provide包裹需要用到仓库数据的组件，并将全局管理状态仓库设置给provide,就不要再分组