一、Redux Toolkit 概念了解
Redux Toolkit 是 Redux 官方强烈推荐，开箱即用的一个高效的 Redux 开发工具集。它旨在成为标准的 Redux 逻辑开发模式。
Redux Toolkit 最初是为了帮助解决有关 Redux 的三个常见问题而创建的：
"配置 Redux store 过于复杂""我必须添加很多软件包才能开始使用 Redux""Redux 有太多样板代码"
二、Redux Toolkit 使用
1、安装
# NPM
npm install @reduxjs/toolkit react-redux# Yarn
yarn add @reduxjs/toolkit react-redux
2、创建 store
src/store/index.js
// 使用 RTK 来构建 store
import { configureStore } from '@reduxjs/toolkit'
import studentReducer from './slicers/studentSlice'// 创建 store 用来创建store对象，需要一个配置对象作为参数
const store = configureStore({// 用来配置 store 中用到的 reducerreducer: {student: studentReducer}
})export default store
3、根组件配置 store
入口 index.js 文件
import ReactDOM from 'react-dom/client'
import App from './App'
import { Provider } from 'react-redux'
import store from './store'const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<Provider store={store}><App /></Provider>
)
4、createSlice 创建 reducer 的切片
src/store/slicers/studentSlice.js
// 它需要一个配置对象作为参数，通过对象的不同的属性来指定它的配置
import { createSlice } from '@reduxjs/toolkit'// state的初始值
const initialState = { name: '莉莉',info: {sex: '男'，age: 18}
}export const studentSlice = createSlice({name: 'stu', // 命名空间，用来自动生成action中的type，name值会成为前缀；保证唯一，不重名initialState,reducers: { // 指定state的各种操作，直接在对象中添加方法// 可以通过不同的方法来指定对state的不同操作// 两个参数：state代理对象，可以直接修改；action操作的信息setName(state, action) {state.name = action.payload},setInfo(state, action) {state.info = action.payload}}
})// 切片对象会【自动】的帮助我们生成action；切片对象存在属性actions
// actions中存储的是slice自动生成action创建器（函数），调用函数后会自动创建action对象
// action对象的结构 {type:name/函数名, payload:函数的参数}
export const { setName, setInfo } = studentSlice.actions
// const nameAction = setName('哈哈') // { type: 'stu/setName', payload: '哈哈'}
// const infoAction = setInfo({sex:'女',age:18}) // { type: 'stu/setInfo', payload: {sex:'女',age:18}}// 简化useSelector使用，student来源于store里面配置的reducer
export const selectName = state => state.student.name
export const selectInfo = state => state.student.info// 导出reducer在store里面使用
export default studentSlice.reducer
5、页面使用
useDispatch() 用来获取派发器对象
useSelector() 用来加载 state 中的数据
import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { setName, setInfo, selectName, selectInfo } from './store/slicers/studentSlice'const App = () => {// 获取student中的name值// const name = useSelector(state => state.student.name)// 简化写法const name = useSelector(selectName) const info = useSelector(selectInfo)const dispatch = useDispatch()const setNameHandler = () => {dispatch(setName('哈哈'))}const setInfoHandler = () => {dispatch(setInfo({sex: '女', age: 18}))}return (<div><p>{name} ---{info.sex} ---{info.age} ---</p><button onClick={setNameHandler}>修改name</button><button onClick={setInfoHandler}>修改info</button></div>)
}export default App
三、redux-persist 持久化储存
在实际开发中，如果用户刷新了网页，那么我们通过 redux 存储的全局数据就会丢失，比如登录信息。可以通过 localStorage 将信息存储到本地，需要自己添加逻辑（了解）。
通过 redux-persist 实现持久化储存，使用过程：
1、 安装
npm install redux-persist
2、配置 store
import { configureStore } from '@reduxjs/toolkit'
import { combineReducers } from 'redux'
// 配置数据的持久化效果
import { persistStore, persistReducer} from 'redux-persist'
// 导入需要配置的数据源，可选storage、cookie、session等
import storage from 'redux-persist/lib/storage'
// import storageSession from 'redux-persist/lib/storage/session'
import userReducer from '@/store/slicers/userSlice'
import menuReducer from '@/store/slicers/menuSlice'// 合并多个模块
const reducers = combineReducers({user: userReducer,menu: menuReducer
})// 配置持久化设置
const persistConfig = {key: 'root',storage, // 持久化存储引擎// 可选的配置项，如白名单、黑名单等 选其一// blacklist: ['不想缓存的状态的名字'],// whitelist: ['想要缓存状态的名字']
}// 创建持久化的配置persist的信息
const persistedReducer = persistReducer(persistConfig, reducers)// 创建存储对象并且抛出对象
export const store = configureStore({reducer: persistedReducer
})// 使用persistStore包裹并抛出
export const persistor = persistStore(store)
3、index.js入口文件中配置
在入口文件中使用 PersistGate 包裹根组件，这将延迟渲染 app 视图直到持久化状态取回并保存到 redux 中。
将 store 提供给应用程序，persistor对象提供给根组件
import ReactDOM from 'react-dom/client'
import App from './App'
import { Provider } from 'react-redux'
// 导入redux中对应抛出的store对象和persistor对象
import { store, persistor } from '@/store'
// 如果使用React，则使用 PersistGate 包裹根组建
import { PersistGate } from 'redux-persist/lib/integration/react'const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<Provider store={store}><PersistGate loading={null} persistor={persistor}><App /></PersistGate></Provider>
)
