react、redux、react-redux之间的关系

最新推荐文章于 2025-03-29 12:06:42 发布

xuzhaokuan

最新推荐文章于 2025-03-29 12:06:42 发布

阅读量124

点赞数

本文链接：https://blog.youkuaiyun.com/xuzhaokuan/article/details/104742071

版权

本文探讨了在React项目中何时应引入Redux。分析了当组件间数据传递变得复杂时，如深层嵌套组件间的props钻孔及兄弟组件间的数据共享难题，Redux如何作为一个中央数据仓库解决这些问题。详细介绍了Redux的工作原理，包括store、action、reducer的概念及其在React-Redux中的集成方式。

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

react

在一些小型项目中，只使用 React 完全够用了，数据管理使用props、state即可，那什么时候需要引入Redux呢？
当渲染一个组件的数据是通过props从父组件中获取时，通常情况下是 A --> B，但随着业务复杂度的增加，有可能是这样的：A --> B --> C --> D --> E，E需要的数据需要从A那里通过props传递过来，以及对应的 E --> A逆向传递callback。组件BCD是不需要这些数据的，但是又必须经由它们来传递，这确实有点不爽，而且传递的props以及callback对BCD组件的复用也会造成影响。或者兄弟组件之间想要共享某些数据，也不是很方便传递、获取等。诸如此类的情况，就有必要引入Redux了。

redux

其实只要将数据放在一个仓库中进行共享即可，大家都可以获取到，也都可以进行修改。
这个仓库只要满足：

存放一个数据对象
外界能访问到这个数据
外界也能修改这个数据
当数据有变化的时候，通知订阅者

更新数据的步骤
What：想干什么 — dispatch(action)
How：怎么干，干的结果 — reducer(oldState, action) => newState
Then?：重新执行订阅函数（比如重新渲染UI等）

这样就实现了一个store，提供一个数据存储中心，可以供外部访问、修改等，这就是Redux的主要思想。

React-Redux

由于全局变量有诸多的缺点，那就换个思路，把store直接集成到React应用的顶层props里面，只要各个子组件能访问到顶层props就行了。
React恰好提供了这么一个钩子，Context，现在各个子组件已经能够轻易地访问到store了，接下来就是子组件把store中用到的数据取出来、修改、以及订阅更新UI等。通过高阶组件把store.getState()、store.dispatch、store.subscribe封装起来，子组件正常使用props获取数据以及正常使用callback触发回调，