这篇我要分享的内容是关于Redux和@reduxjs/toolkit的知识,希望能让大家通过我这篇文章,能更好的对redux有一个更深入的了解!!!
1. Redux
1. 什么是Redux
Redux 是
JavaScript
应用的状态容器,提供可预测的状态管理
Redux 可以与
React
或其他视图库一起使用,使用原生
JS
编写。并不依赖于
React
Redux用一个单独的常量状态树(
state
对象)保存这一整个应用的状态,这个对象不能直接
被改变。当一些数据变化了,一个新的对象就会被创建
2. Redux的使用原则
state以单一对象存储在
store
对象中
state是只读的(每次都返回一个新的对象)
使用纯函数reducer
执行
state
更新
了解redux之前我们先来了解一个概念叫做纯函数,那么什么是纯函数呢?
3. Redux的工作流
组件通过
dispatch
发起更新请求:
dispatch(action)
Reducer
接收请求
Reducer
更新
store
中所保存的
state
数据
store
通知组件更新组件的状态
4. redux基本使用
引入
createStore
,创建
store
对象
编写
reducer
函数,修改
stroe
中的
state
数据
组件通过
dispatch
方法提交
action
给
reducer
组件调用
getState
方法来渲染数据
通过
subscribe
方法来监听数据的变化,调用
setState
方法触发
render
重新渲染
5.
合并
reducer
如果我们在一个
reducer
中管理多个状态的话,这样会很影响性能。也不便于我们维护,所以
我们需要对
reducer
拆分在进行合并
2.什么是react-redux
官网:
https://react-redux.js.org
介绍
React Redux是
Redux
的官方
React
UI
绑定层。它让您的
React
组件从
Redux
存储中读取数
据,并将操作分派到存储以更新状态
React Redux 由
Redux
团队维护,并
与来自
Redux
和
React
的最新
API
保持同步
旨在与 React
的组件模型一起使用
。您定义如何从
Redux
中提取组件所需的值,并且组件
会根据需要自动更新
提供 API
使您的组件能够与
Redux
存储交互
,因此您不必自己编写该逻辑
自动实现复杂的性能优化
,这样你自己的组件只有在它需要的数据实际发生变化时才会重新
渲染
2. 为什么要使用react-redux
可以帮助我们订阅
store
、检查更新数据和触发组件的重新渲染。
3. 容器组件与UI组件
UI
组件
只负责 UI
的呈现,不带有任何业务逻辑
没有状态(即不使用this.state
这个变量)
所有数据都由参数(this.props
)提供
不使用任何 Redux
的
API
容器组件
负责管理数据和业务逻辑,不负责 UI
的呈现
带有内部状态
使用 Redux
的
API
4. 基本使用
下载
react
-
redux
和
@reduxjs/toolkit
创建
store
创建切片
使用
react
-
redux
中的
Provider
组件包裹整个根组件,传递
store
在
components/Counter.js
中引入
connect
模块,用于从
UI
组件中生成容器组件
3. @reduxjs/toolkit
1. 介绍
Redux Toolkit包旨在成为编写Redux
逻辑的标准方式。它最初的创建是为了帮助解决关于Redux 的三个常见问题
配置 Redux 存储太复杂了
我必须添加很多包才能让 Redux 做任何有用的事情
Redux 需要太多样板代码
默认包含 redux-
thunk
,并启用
Redux DevTools Extension
2. 基本使用
安装
创建
store
对象
创建
reducer
切片
通过
dispatch
方法传递
actions
,触发
reducer
并渲染
3.在组件中使用
store/index.js
store/modules/counterSlice.js
store/modules/listSlice.js
components/Counter.js
components/List.js
App.js
index.js
简单来说就是,redux就是创建一个切片对象,在切片对象里定义数据和修改数据方法,然后抛出对象和方法,在store组件中是用来存储不同的切片对象,在组件中使用就是通过导入 useDispatch和useSelector这两个属性来进行数据的操作,其中useSelector是用来获取切片的数据吗,而dispatch是用来调用切片里的方法来进行数据的操作,redux一般运用在较复杂的项目中,使得数据状态保存的更持久!!!
下面我来介绍一下redux的一款调试工具叫做
redux-devtools
4. redux-devtools安装
1.
打开这个网址:
https://github.com/reduxjs/redux-devtools
2. 进入下载页面
3.
下载压缩包
4.
进行下载
5.
在
chrome
浏览器中打开这个页面:
chrome://extensions/
6.
解压之前的文件,将其拖拽到这个页面下
这个工具是用来更直观的查看redux中定义的数据,今天就是我要讲的关于redux的相关知识,如有不足,请多指正!!!