react-redux与@reduxjs/toolkit的核心区别是什么?
@reduxjs/toolkit 与 react-redux 的核心区别 二者是Redux生态里分工完全不同的两个官方库,不存在替代关系,通常搭配使用,具体差异可以从三个维度区分:
- 核心定位不同
*@reduxjs/toolkit(业内简称RTK)是Redux官方推出的核心逻辑层工具集,和React没有强绑定。它的存在是为了解决原生Redux开发模板代码冗余、配置繁琐、Immutable更新容易写错、异步逻辑配置复杂等痛点,把Redux开发中需要重复手写的action类型定义、action creator生成、reducer拼装、异步中间件配置、常用工具函数都做了开箱封装,甚至内置了数据请求缓存能力(RTK Query),是目前Redux官方推荐的编写Redux状态逻辑的标准方式,哪怕你在非React的项目(比如原生JS、Vue项目)里用Redux,也可以单独安装RTK简化逻辑编写。
*react-redux是Redux官方为React生态定制的视图层绑定库,本身不包含任何Redux状态逻辑的实现。它的唯一作用是打通Redux Store和React组件树的连接:提供Provider组件向全局组件注入Store实例,提供useSelector、useDispatch等Hook让组件可以读取Store状态、触发状态更新,脱离React运行环境这个库没有任何作用。 - 依赖关系不同
安装@reduxjs/toolkit时,会自动安装Redux核心库redux作为内置依赖,但不会自带react-redux;单独安装react-redux时,仅会安装桥接层相关的代码,不会包含Redux核心逻辑或RTK的工具能力。 - 开发场景分工不同
以你正在开发的React电商项目为例:- 所有状态相关的逻辑编写都靠
@reduxjs/toolkit完成:用createSlice定义购物车、商品列表、用户登录态等状态模块,写同步状态修改规则、异步拉取商品列表/提交订单的请求逻辑,最后拼装生成完整的全局Store - 所有组件和Store的交互都靠
react-redux完成:用Provider把Store挂载到项目根组件,在商品卡片、购物车页、结算页等业务组件里,通过useSelector读取存在Store里的购物车数量、用户信息等数据,通过useDispatch触发加购、修改购物车商品数量、清空购物车等状态更新操作
- 所有状态相关的逻辑编写都靠
一句话总结:RTK负责帮你「写好状态管理的所有逻辑」,react-redux负责帮你「把写好的状态逻辑接到React组件里供页面调用」,这也是教程里会同时安装两个依赖的原因。
内容的提问来源于stack exchange,提问作者Darkpsinight
相关产品推荐
相关产品推荐

