redux关联react的方法-创新互联

这篇文章主要介绍redux关联react的方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

在react中可以react-redux库来关联redux；react-redux提供了一些封装，可以以一种更科学的代码组织方式，让我们更舒服地在React的代码中使用Redux。

• 该方法适用于所有品牌的电脑。

  
  

Redux本身和React并没有之间的关联，它是一个通用Javscript App模块，用做App State的管理。要在React的项目中使用Redux，比较好的方式是借助react-redux这个库来做连接，这里的意思是，并不是没有react-redux，这两个库就不弄一起用了，而是说react-redux提供了一些封装，一种更科学的代码组织方式，让我们更舒服地在React的代码中使用Redux。

redux和react是怎么配合的？

react-redux提供connect和provider两个基友，他们connect将组件和redux关联起来，provider将store传递给组件，组件通过dispatch发出action, store根据action的type属性调用对应的reducer并传入state和这个action，reducer对state进行处理返回一个新的state放入store, connect监听到store的变化，调用setState更新组件，此时组件的props也就跟着发生变化。

Provider:

provider是一个组件，它接受store作为props，然后通过context往下传，这个react中任何组件都可以通过context获取store;

connect:

connect(mapStateToProps, mapDispatchToProps, mergeProps, options)是一个函数，它接受四个参数并且返回一个函数—wrapWithConnect，wrapWithConnect它接受一个组件作为参数wrapWithConnect（component）， 它内部定义一个新的组件connect（容器组件）并将传入的组件作为connect的子组件然后return出去。

mapStateToProps(state.[ownPros]):

mapStateToProps接受两个参数，store的state和自定义的props，并返回一个新的对象，这个对象会作为props的一部分传入UI组件。我们可以根据组件所需要的数据自定义返回一个对象，ownProps的变化也会触发mapStateToProps

mapDispatchToProps(dispatch,[ownProps]):

mapDispatchToProps如果是对象，那么会和store绑定作为props的一部分传入UI组件。如果这个函数接受两个参数，bindActionCreators会将action和dispatch绑定并返回一个对象，这个对象会和ownProps一起作为props的一部分传入UI组件，所以不论mapDispatchToProps是对象还是函数，它最终都会返回一个对象，如果是函数，这个对象的key值是可以自定义的。

以上是“redux关联react的方法”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！