Redux
Redux 是一个用于 JavaScript 应用的状态容器,Redux 的核心思想是将应用程序的所有状态存储在一个单一的、全局的 store 中，并提供了一套规则来确保状态以一种可预测的方式进行变更.
安装
npm i @reduxjs/toolkit react-redux
创建目录
创建store文件夹，在文件夹下创建index.js（注册文件）和modules以及他下面的countStore.js(状态文件)
编写状态管理类
// 导入createSlice函数，用于创建Redux状态管理中的slice
import {createSlice} from "@reduxjs/toolkit";// 创建一个名为"counter"的slice，用于管理计数器的状态
const countStore = createSlice({// 定义slice的名称name:"counter",// 定义初始状态，计数器的初始值为0initialState: {count:0},// 定义 reducer 函数，用于处理状态变化reducers:{// 增加计数器的值increment:(state,action)=>{// 将传入的值加到当前计数器上state.count+=action.payload},// 减少计数器的值decrement:(state)=>{// 当前计数器值减1state.count-=1}}}
)// 从生成的actions中解构出increment和decrement
const {increment,decrement} = countStore.actions
// 获取slice的reducer函数
const countReducer = countStore.reducer
// 导出increment和decrement动作，供外部调用
export {increment,decrement}
// 导出reducer函数，供Redux store使用
export default countReducer注册store
import {configureStore} from "@reduxjs/toolkit";
import countReducer from "./modules/countStore.js";const store = configureStore({reducer:{counter:countReducer}
})export default store
使用Redux
修改main.jsx,将redux挂载到组件中
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import store from "./store/index.js";
import { Provider } from "react-redux";createRoot(document.getElementById('root')).render(<StrictMode><Provider store={store}><App /></Provider></StrictMode>
)在组件中使用
import {useDispatch, useSelector} from "react-redux";
import {increment,decrement} from './store/modules/countStore.js'
function App() {const { count } = useSelector(state => state.counter)const dispatch = useDispatch();return (<div><div><h3>{count}</h3><button onClick={() => dispatch(increment(1))}>+</button><button onClick={() => dispatch(increment(10))}>+10</button><button onClick={() => dispatch(decrement())}>-</button></div></div>)
}export default App
