react 状态管理

Redux

Redux是React中常用的状态管理组件，类似于Vue中的Pinia(Vuex)，可以独立于框架运行

作用： 通过集中管理的方式管理应用的状态

配套工具

在react中使用redux，官方要求按照两个插件，Redux Toolkit 和 react-redux

Redux Toolkit 是官方推荐编写Redux逻辑的方式，是一套工具的集合集，简化书写方式

react-redux 用来连接redux 和 react组件的中间件

npm i @reduxjs/toolkit react-redux

store目录结构设计

• 通常集中状态管理的部分都会单独创建一个store目录
• 应用通常会有多个子store模块，所以创建一个modules目录，在内部编写业务分类的子store
• store中的入口文件index.js的作用是组合modules中所有的子模块，并导出store

使用

counterStore.js

import { createSlice } from "@reduxjs/toolkit";const counterStore = createSlice({// 名称name: "counter",// 初始化状态initialState:{count:0},//修改数据的同步方法reducers:{add(store){store.count++},sub(store){store.count--}}
})
// 结构出action对象中的函数
const {add,sub} = counterStore.actions
// reducer函数
const currentReducer = counterStore.reducer
// 导出
export default currentReducer
export {add,sub}

index.js

import { configureStore } from "@reduxjs/toolkit";import counterReducer from "./modules/counterStore";// 创建根store组合子模块
const store = configureStore({reducer:{counter:counterReducer}
})export default store;

为react注入store
react-redux负责把Redux和React连接起来，内置Provider组件，通过store参数把创建好的store实例注入到应用中。

main.jsx 项目的入口文件

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import store from './store'
import { Provider } from 'react-redux'createRoot(document.getElementById('root')).render(<StrictMode><Provider store={store}><App /></Provider></StrictMode>,
)

在组件中使用

在react组件中使用store中的数据，需要用到一个钩子函数useSelector，它的作用是把store中的数据映射到组件中

function App() {const counterReducer = useSelector(state => state.counter);return (<div><div>当前值：{counterReducer.count}</div></div>);
}

React组件中修改store中的数据需要借助另外一个hook函数——useDispatch，它的作用是生成提交action对象的dispatch函数

import './App.css'
import { useSelector,useDispatch } from 'react-redux';// 导入创建的action对象的方法
import { add, sub } from './store/modules/counterStore';
function App() {const counterReducer = useSelector(state => state.counter);// 获取dispatch函数const dispatch = useDispatch();return (<div><div>当前值：{counterReducer.count}</div>{/* 调用 */}<button onClick={() => dispatch(add())}>加一</button><button onClick={() => dispatch(sub())}>减一</button></div>);
}

提交action传参

在reducers的同步修改方法中添加action对象参数，在调用ationCreater的时候传递参数，参数会被传递到action对象的payload属性上

import { createSlice } from "@reduxjs/toolkit";const counterStore = createSlice({// 名称name: "counter",// 初始化状态initialState:{count:0},//修改数据的同步方法reducers:{add(store){store.count++},sub(store){store.count--},addNum(store,action){store.count+= action.payload}}
})
// 结构出action对象中的函数
const {add,sub,addNum} = counterStore.actions
// reducer函数
const currentReducer = counterStore.reducer
// 导出
export default currentReducer
export {add,sub,addNum}

在这里插入代码片
import './App.css'
import { useSelector,useDispatch } from 'react-redux';// 导入创建的action对象的方法
import { add, sub,addNum } from './store/modules/counterStore';
function App() {const counterReducer = useSelector(state => state.counter);// 获取dispatch函数const dispatch = useDispatch();return (<div><div>当前值：{counterReducer.count}</div>{/* 调用 */}<button onClick={() => dispatch(add())}>加一</button><button onClick={() => dispatch(sub())}>减一</button>{/* 加三 */}<button onClick={() => dispatch(addNum(3))}>加三</button></div>);
}

异步操作

• 创建store的方式不变，配置好同步修改状态的方法
• 单独封装一个函数，在函数内部return一个新函数，在新函数中
  • 封装异步请求获取数据
  • 调用同步actionCreate传入异步数据生成的一个action对象，并使用dispatch提交
• 组件中dispatch的写法不变

englishStore.js

import { createSlice } from "@reduxjs/toolkit";
const englishStore = createSlice({name: "englishstore",// 初始化状态initialState: {// 英文内容content: "",// 中文内容note: "",},// 修改内容reducers: {changeEnglish(store, action) {console.log(action.payload);store.content = action.payload.content;store.note = action.payload.note;},},
});// 结构出action对象中的方法
const { changeEnglish } = englishStore.actions;// 异步请求
const fetchEnglish = () => {return async (dispatch) => {const res = await fetch("https://api.oioweb.cn/api/common/OneDayEnglish");const data = await res.json();console.log(data);// 修改状态dispatch(changeEnglish(data.result));};
};// reducer函数
const englishReducer = englishStore.reducer;// 导出
export default englishReducer;
export { fetchEnglish };

使用

import { useEffect } from 'react';
import './App.css'
import { useSelector, useDispatch } from 'react-redux';
import { fetchEnglish } from './store/modules/englishStore';function App() {const englishReducer = useSelector(state => state.english)const dispatch = useDispatch()useEffect(() => {// 触发异步请求dispatch(fetchEnglish())}, [dispatch])return (<div><div>中文：{englishReducer.note}</div><div>英文：{englishReducer.content}</div></div>);
}export default App