理解Redux和React-Redux

最新推荐文章于 2024-03-23 09:31:27 发布

promise_yaner

最新推荐文章于 2024-03-23 09:31:27 发布

阅读量353

点赞数

文章标签： react.js 前端

本文链接：https://blog.csdn.net/Greenary/article/details/125202574

版权

Redux

什么是Redux?

Redux是用action事件来管理和更新应用状态的模式和工具库，它对整个应用中的状态进行集中管理，称为仓库Store。

为什么用Redux?

有许多state是很多组件都需要使用的，而组件之间的通信很麻烦，而且会造成很多组件传递自己并不需要的数据。于是需要一个状态管理仓库来帮助管理全局的状态。这样每个组件只从仓库中获取自己需要的那部分数据即可，当然组件仍然可以有自己私有的state。

什么时候使用Redux?

一些state在很多组件中都需要使用时

（并不只这一点，目前还不理解其他原因，故只写这一点）

怎么使用Redux?

Redux有几个关键的概念

1. store:仓库，管理全局的state，是一个对象

2. action:事件，表示用户的某种行为，是一个对象 {type:'add',payload:'2'}

3. action creator():是一个函数，该函数的调用可以生成action对象

4. reducer():是一个只接收state和action为参数的纯函数，根据action.type更新state，得到新的state，但原state不发生变化。

5. dispatch():当用户发生某种行为时，可以在eventHandler中dispatch一个action，即触发某种行为，交给store，store会调用reducer函数，得到新的state。这是更新state的唯一方法。

6. subscribe():用来订阅数据的变化，当state发生变化，就会立即执行一次。

使用流程

书写reducer->创建reducer
创建并初始化store
store.getState()获取state
用户行为发生，在eventHandler中store.dispatch(action)触发事件，交给store
store调用reducer，reducer返回新的数据，store会使用return的值更新state。
store.subscribe()订阅数据变化
页面重新渲染

还有一种方式是借助@reduxjs/toolkit的createSlice和configureStore

用createSlice创建reducer和action creator
根据reducer配置store
用react-redux中的useSelector从state tree中获取state
用react-redux中的useDispatch获取dispatch

Redux的优缺点？

优点很明显：

对整个应用的状态进行集中管理，每个组件都可以从仓库中获取自己需要的数据，避免了复杂的组件间通信。
Redux在任何ui框架中都可以使用，不过更多用于React框架。

也有一些缺点吧：

每个组件都需要用store.getState()获取数据，store.dispatch()触发行为更新数据，store.subscribe()订阅数据变化，是有一些麻烦的。

React-Redux

什么是React-Redux

React-Redux是把Redux和React框架集成起来，更加方便React使用的一个仓库。其核心思想和整体流程是一样的。

已经有了Redux，为什么还要React-Redux？

我们希望最顶层的组件拥有store，而且每个组件都直接访问store，获取数据更新数据订阅数据变化确实有些麻烦。

React-Redux具体又是怎么做的？

一些概念：

connect()函数：将state和组件联系起来，接收两个参数mapStateToProps,mapDispatchToProps。
mapStateToProps是一个函数，接收整个store，返回ui组件需要的state
mapDispatchToProps可以是函数，也可以是对象。

具体实现：

React-Redux在原顶层App组件外面又包裹了一个Provider组件作为新的顶层组件，并将store提供给Provider组件作为其Props，这样store就是整个组件树中最顶层组件所拥有的数据。其他各个子组件都可以通过Context接收到Provider组件的props，即各个子组件都可以访问到store。

React-Redux还提供了一个容器组件，容器组件通过connect(mapStateToProps,mapDispatchToProps)函数包裹UI组件，mapStateToProps将UI组件需要的state映射到UI组件接收的Props对象中，mapDispatchToProps将UI组件需要的需要用到的action creator映射到UI组件接收到的Props对象中，action creator可以在eventHandler被调用，一旦调用，生成的action对象就会被dispatch，交给store，reducer函数执行，state更新，页面重新渲染。

React-Redux将所有组件分为容器组件和UI组件。容器组件负责数据和业务逻辑，UI组件负责展示。