1.Redux 安装
npm i redux //安装redux
or
yarn add redux
npm i react-redux @reduxjs/toolkit//安装一下工具库
2.Redux 是什么
全局状态管理库
我们可以通过在项目中新建 store 文件在其中增加模块来对整个项目对应的功能模块数据进行统一管理
3.Redux 什么时候使用
很致命的问题，我也不知道。
官方的解答
- 在应用的大量地方，都存在大量的状态
- 应用状态会随着时间的推移而频繁更新
- 更新该状态的逻辑可能很复杂
- 中型和大型代码量的应用，很多人协同开发
不过我推荐初学者可以在不管项目大小都可以直接使用，一来是熟悉使用二来是可以慢慢摸索出项目的功能模块里哪些地方用哪些地方不需要用。在工作的项目中用到全局管理的地方还是很多的，所以加油学它就完事!
4.认识 Redux
现在我们来认识认识 redux 的一些基础知识吼！
重中之重 !!!官方给出的redux数据流转图!!!
我简单介绍下三个圆球的作用:
- state:我们 redux 的数据源
- view:我们的页面
- actions:触发修改 state 的事件（state 内数据修改只能通过一个 action 方法执行进行修改）
5.实操
Redux Toolkit 是我们推荐的编写 Redux 逻辑的方法 以下 redux 的代码都是使用 Redux Toolkit 库的写法
项目目录
在 sotre/index.js 文件内创建好容器并导出至 main.jsx 内，以下是整体代码:
// sotre/modules/count.js
import { createSlice } from '@reduxjs/toolkit'
export const counterSlice = createSlice({ // 创建counterStore切片
// 命名空间
name: 'count',
// 初始状态
initialState: { // 所谓的state
count: 0,
loading: false,
text: null
},
// 定义reducers函数
reducers: {
add: (state, action) => { // 增加
if (state.count === 100) {
state.count = 100
} else if (action.payload) {
state.count += action.payload
} else {
state.count += 1
}
},
decrease: (state, action) => { // 减少
if (state.count === 0) {
state.count = 0
} else if (action.payload) {
state.count -= action.payload
} else {
state.count -= 1
}
},
loading: (state, action) => {// 加载状态
state.loading = action.payload
},
fetchData: (state, action) => {
state.text = action.payload
}
},
})
export const { add, decrease, loading, fetchData } = counterSlice.actions // 导出actions方法
// 定义异步action
export const asyncData = () => {
return async (dispatch) => {
dispatch(loading(true))
const text = await fetch('https://api.d5.nz/api/yiyan.php') //获取一段随机文字接口
const res = await text.text()
dispatch(loading(false))
dispatch(fetchData(res))
}
}
export default counterSlice.reducer // 导出reducer方法
// sotre/index.js
import { configureStore } from '@reduxjs/toolkit'
import counterReducer from './modules/count'
const store = configureStore({
reducer: {
counter: counterReducer //导入counter切片
}
})
export default store
// main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { Provider } from 'react-redux'
import store from './sotre'
import App from './App'
import 'antd/dist/antd.css';
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
<Provider store={store}> {/* Provider容器包裹数据 */}
<App />
</Provider>
)
以下是 UI 界面代码: 先介绍所使用的两个 react-redux 的 API:
- useSelector:内部接收一个函数，它将整个 Redux 存储状态作为其参数，从中读取指定的值并返回该结果，具体用法请看下方代码。
- useDispatch:个人理解(该函数返回 dispatch 方法进行 action 的调用)，用法请看下方代码。
// App.jsx
import { Button, Space, Spin, Progress } from "antd";
import { useSelector, useDispatch } from "react-redux";
import { add, decrease, asyncData } from "./sotre/modules/count"; // 导入count模块actions方法
function App() {
const { count, text, loading } = useSelector((store) => store.counter); //读取count模块的的"state"值
const dispatch = useDispatch(); //创建dispatch
return (
<div className="App">
<Progress type="circle" percent={count} />
{text}
<Spin spinning={loading} tip="Loading...">
<Space>
<Button onClick={() => dispatch(add())}>增加count</Button>
<Button onClick={() => dispatch(add(20))}>增加20</Button>
<Button onClick={() => dispatch(decrease(20))}>减少20</Button>
<Button onClick={() => dispatch(asyncData())}>获取随机语句</Button>
</Space>
</Spin>
</div>
);
}
export default App;
效果如下⬇
本次总结到此结束啦!!!!!
文章有错误或者不详细的地方还希望大家可以多多指出，一起进步！🎉🎉🎉🎉
