redux初学者

最新推荐文章于 2024-10-07 09:24:46 发布

咒大西

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量354

点赞数 3

分类专栏： react 文章标签： typescript javascript 前端

本文链接：https://blog.csdn.net/weixin_43922786/article/details/121434710

版权

react 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

什么是redux
什么要使用Redux
Redux
Redux和组件结合
使用场景

什么是redux

Redux 是 JavaScript 状态容器，提供可预测化的状态管理，全局的状态管理，它可以帮助你以简单易用的方式构建复杂项目并进行维护（简单理解不啰嗦）

什么要使用Redux

使用Redux的主要优势之一是它可以帮你处理应用的共享状态。如果两个组件需要访问同一状态，该怎么办？这种两个组件同时需要访问同一状态的现象称为“共享状态”。你可以将该状态提升到附近的父组件，但是如果该父组件在组件树中向上好几个组件的位置，那么将状态当做属性向下一个一个地传递，这项工作很快就会变得乏味。此外，在该父组件和该子组件之间的组件甚至根本不需要访问该状态！

在构建网络应用时，Redux不仅使我们能够以有条理的方式存储数据，而且使我们能够在应用的任何位置快速获取该数据。只需告诉Redux到底哪个组件需要哪个数据，它就会为你处理后续一切工作！

Redux

是一个单独的库，可以和react配合使用，同时也可以和vue配合使用
主要是管理全局的状态
如何使用（安装 npm install redux -S）
redux的机制！新建一个store文件夹，内建一个index.js文件并引入redux包
那么createStore这个函数是干嘛的？它是用来创建store仓库的
内部有三个参数，暂且将前两个
1、第一个参数是 reducer 是一个纯函数，改函数的返回值用于更新仓库里的状态
2、第二个参数是 initalState 是仓库的初始值

在这里插入图片描述
那么reducer是个函数，它也有两个参数，（state，action）

	1、state就是仓库当前参数的的状态
    2、action是一个对象, 去描述仓库里的状态如何发生变化

那么reducer何时触发执行？

	1、初始会执行一次（初始状态改变成reduce的返回值）
    2、通过store.dispatch() ==》dispatch接受一个对象，对象内必须要有一个属性为type属性

打印store

在这里插入图片描述
发现有一个getState：它是获取store内的全部状态

那我们可以通过dispatch去出发reducer，并且dispatch内传递参数就是reducer内的第二参数action，那么我们可以通过调用dispatch去让reducer改变state

在这里插入图片描述

Redux和组件结合

方案一

先将store抛出

在这里插入图片描述

在组件内部去引入并使用

在这里插入图片描述

方案二

利用store中的subscribe（回调函数）=》（当改变了store中的状态时就会触发此方法）

this.liten = Store.subscribe(() => {
    // 为什么要使用setState 是因为必须改变状态才会从新render（）这样才能重新更新视图
    // 由于PureComponent的作用，每次修改state的状态时都会去判断是否全等，所以这里可以使用时间戳
    this.setState({time: new Date().getTime()}); // 在仓库中数据发生变化时候，触发并更新了视图
})

// 但要记住，要在组件的生命周期卸载期 去取消监听
componentWillUnmount() {
    this.liten(); // 在组件卸载扽时候取消监听
}

在这里插入图片描述

方案三

Redux 是一个单独的库，发现和react配合起来很好用，但是你们会发现，我们要使用redux就必须每次去引入store很麻烦，所以由此又开发出了“react-redux”库它的作用就是专门让redux和react进行通讯

使用react-redux的库，该库的作用就是让组件和仓库通信

    先下载 npm instsall react-redux -S

    先引入react-redux中的Provider组件

在这里插入图片描述

在根组件上包裹着Provider组件并引入store把传入到组件中

在这里插入图片描述

Provider的作用

* Provider是作为整个App的容器，在你原有的App Container的基础上再包上一层
* 接受Redux的store作为props，并将其声明为context的属性之一
* 子组件可以在声明了contextTypes之后可以方便的通过this.context.store访问到store

在需要通行的组件上引入connect
在这里插入图片描述


// connect的作用 将store中的state，action 和 React组件 连接起来 （连接到组件上）
// mapStateToProps 将store中的state映射（注入、添加到当前组件的props上）
// mapStateToDispatch 将store中的dispatch映射（注入、添加到当前组件的props上）


let mapStateToProps = (state) => {

// 从仓库中获取数据 state 就相当与store.getState()的返回值
// 它返回的对象会被传入到当前组件的props上
return {...state}

}


let mapStateToDispatch = () => {

}


// 如果connect接受一个参数，那么会默认store.dispatch这个方法映射到组件的属性上
// const homes = connect(mapStateToProps)

使用connect去包装组件

在这里插入图片描述
修改仓库状态

在这里插入图片描述

当connect接收第二个参数

在这里插入图片描述

注意：connect实际有四个参数，本次不介绍后两个

在这里插入图片描述

使用场景

举个小栗子，一个带有购物车的网站。在顶部，我们用一个UI组件显示购物车中的商品数量。我们还可以用另一个UI组件，显示购物车中商品的总价。如果用户点击添加到购物车按钮，则这两个组件应立即更新当前的数据。如果用户从购物车中删除商品、更改数目、使用优惠券或者更改送货地点，则相关的UI组件都应该更新出正确的信息。
可以看到，随着功能范围的扩大，一个简单的购物车将会很难保持数据同步