1. 什么是redux?
redux
是一个独立的,开源的,第三方的集中式的状态管理器。redux
除了和React
一起用外,还支持其它界面库。它体小精悍(只有2kB,包括依赖)- 我们知道
react
是一个单项数据流框架,state
数据具有只读属性,在组件通讯中:
父传子:直接通过prop
传递,
子传父:通过父传递给子方法,子组件调用这个方法进行传参,
子传子︰兄弟传参,状态提升,可以把他们的状态提升到公共的父组件中或者使用exentBus
创建公共容器。 - 那么更复杂的组件关系该如何传参,如果某个状态组件需要被其他所有组件共享,那是不是每个组件都需要进行传递参数和接收参数,因此,
redux
就是为了解决这个问题,为我们提供一个可以存放共享状态的仓库。
我们来看一下redux的工作原理图
2. redux的核心概念:
核心概念:store
、action
、reducer
2.1 store
store:仓库,Redux 的核心,整合 action 和 reducer
特点:
- 一个应用有且只能有一个store, 整个应用需要管理的数据都在这个Store里面,他相当于一个最高指挥家,他负责把action动作交给对应的reducer进行执行,也就是说将state、action和reducer联系在一起的对象。
- 这个Store我们不能直接去改变,我们只能通过返回一个新的Store去更改它。redux提供了一个createStore来创建state
import {
createStore } from 'redux'
const store = createStore(reducer)
action:动作
一个js对象,包含两个属性:
- type: 标识属性,值是字符串。多个type用action分开
- payload:数据属性,可选。表示本次动作携带的数据
- 这个 action 指的是视图层发起的一个操作,告诉Store 我们需要改变。比如用户点击了按钮,我们就要去请求列表,列表的数据就会变更。每个 action 必须有一个 type 属性,这表示 action 的名称,然后还可以有一个 payload 属性,这个属性可以带一些参数,用作 Store 变更:
const action = {
type: 'ADD_ITEM',
payload: 'new item', // 可选属性
}
reducer:处理器
-
初始化状态
-
修改状态
-
在redux中,reducers是用来处理action的纯函数。当一个action发生时,reducers会根据action中的type和payload来更新store中的state。reducers接收当前的state和action,并返回一个新的state,而不会对原有的state进行修改。
-
reducers被设计为纯函数,所以它们不会有副作用,也不会改变传递给它们的参数。它们始终使用同样的输入来产生同样的输出,因此非常易于测试和调试。
-
比如像计算器我们需要在原来的数据上进行加1的操作,那么旧状态旧对应原来的数据,action对应加1的操作,返回的新状态就是计算器加完之后重新返回的结果。
在reduces定义 加减的案例
reducers: {
// 处理加法
increment: (state) => {
state.value += 1;
},
// 处理减法
decrement: (state) => {
state.value -= 1;
},
addValue: (state, action) => {
// action.payload为传入的参数
state.value += action.payload;
},
},
3. 使用redux
3.1 安装依赖@reduxjs/toolkit
npm i @reduxjs/toolkit react-redux -S
3.2 redux 代码具体配置
1 . 定义仓库
在src里面创建一个store文件夹的仓库,仓库就在此文件夹中编辑
下面是store中index.js的案例
// 引入configureStore 定义仓库
import {
configureStore } from "@reduxjs/toolkit";
// 定义仓库
export const store = configureStore({
// 数据处理器
reducer: {
},
});
2 . 全局注入仓库
main.js 中 导入仓库,导入Provider
用 Provider 标签包裹 App
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
// 导入仓库
import {
store } from './store/index'
// 导入provider
import {
Provider } from 'react-redux'
ReactDOM.createRoot(document.getElementById('root')).render(
// <React.StrictMode>
<Provider store={
store}>
<App />
</Provider>
// </React.StrictMode>,
)
3 . 定义仓库片段
在store文件中创建counterSlice.js切片文件
createSlice
切片函数
name
切片名称
initialState
初始状态
reducers
处理器
导出处理器和切片
导出异步操作
// 创建计数器切片 slice
// 导入创建切片的函数
import {
createSlice } from "@reduxjs/toolkit";
// 定义初始状态
const initialState = {
value: 5 };
// 创建切片
const counterSlice = createSlice({
// 切片名称
name: "counter",
// 初始状态
initialState,
// 定义处理器
reducers: {
// 处理加法
increment: (state) => {
state.value += 1;
},
// 处理减法
decrement: (state) => {
state.value -= 1;
},
addValue: (state, action) => {
// action.payload为传入的参数
state.value += action.payload;
},
},
});
// 导出处理器
export const {
increment, decrement, addValue } = counterSlice.actions;
// 导出切片
export default counterSlice.reducer;
// 导出异步操作
export const syncAddValue=(value)=>(dispatch)=>{
setTimeout(()=>{
dispatch(addValue(value))
},2000)
}
4. 注册仓库片段
在store–>index.js 中 导入并注入counterSlice
// 引入configureStore 定义仓库
import {
configureStore } from "@reduxjs/toolkit";
// 导入切片
import counter from "./counterSlice";
// 定义仓库
export const store = configureStore({
// 数据处理器
reducer: {
// 注册切片 键值对一致的简写
counter,
},
});
5. 使用仓库数据
导入useSelect
,useDispatch
,
导入counterSlice
中定义的方法:increnment
,decrement
,addValue
通过dispatch
(方法())调用counterSlice
中的方法
import {
useSelector, useDispatch } from 'react-redux'
// 导入动作
import {
increment, decrement, addValue } from '@/store/counterSlice'
function DashView() {
// 从store中获取数据
const value = useSelector((state) => state.counter.value)
// 获取dispatch
const dispatch = useDispatch()
return (<>
<h1>DashView页面 counter的值:{
value}</h1>
<button onClick={
() => dispatch(increment())}>+1</button>
<button onClick={
()=>dispatch(decrement())}>-1</button>
<button onClick={
()=>dispatch(addValue(5))}>+5</button>
</>);
}
export default DashView;
以上就是rudux的基础知识。