安庆市大观区城乡建设局网站,如何用网站设计制作,在线制作图片书,wordpress a5一、Redux Toolkit 概念了解
Redux Toolkit 是 Redux 官方强烈推荐#xff0c;开箱即用的一个高效的 Redux 开发工具集。它旨在成为标准的 Redux 逻辑开发模式。
Redux Toolkit 最初是为了帮助解决有关 Redux 的三个常见问题而创建的#xff1a;
配置 Redux store 过…一、Redux Toolkit 概念了解
Redux Toolkit 是 Redux 官方强烈推荐开箱即用的一个高效的 Redux 开发工具集。它旨在成为标准的 Redux 逻辑开发模式。
Redux Toolkit 最初是为了帮助解决有关 Redux 的三个常见问题而创建的
配置 Redux store 过于复杂我必须添加很多软件包才能开始使用 ReduxRedux 有太多样板代码二、Redux Toolkit 使用
1、安装
# NPM
npm install reduxjs/toolkit react-redux# Yarn
yarn add reduxjs/toolkit react-redux2、创建 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 store3、根组件配置 store
入口 index.js 文件
import ReactDOM from react-dom/client
import App from ./App
import { Provider } from react-redux
import store from ./storeconst 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中的typename值会成为前缀保证唯一不重名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.reducer5、页面使用
useDispatch() 用来获取派发器对象 useSelector() 用来加载 state 中的数据
import React from react
import { useDispatch, useSelector } from react-redux
import { setName, setInfo, selectName, selectInfo } from ./store/slicers/studentSliceconst 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 (divp{name} ---{info.sex} ---{info.age} ---/pbutton onClick{setNameHandler}修改name/buttonbutton onClick{setInfoHandler}修改info/button/div)
}export default App三、redux-persist 持久化储存
在实际开发中如果用户刷新了网页那么我们通过 redux 存储的全局数据就会丢失比如登录信息。可以通过 localStorage 将信息存储到本地需要自己添加逻辑了解。
通过 redux-persist 实现持久化储存使用过程
1、 安装
npm install redux-persist2、配置 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/reactconst root ReactDOM.createRoot(document.getElementById(root))
root.render(Provider store{store}PersistGate loading{null} persistor{persistor}App //PersistGate/Provider
)
