用手机能建网站吗,电商网站建设的意义,优质服务的小企业网站建设,郑州买房三大网站Redux-Toolkit是为了简化使用Redux繁琐的步骤#xff0c;可以j降低使用useReducer与useContext管理状态的频率#xff0c;而且起到项目中状态管理规范和约束化的效果。
阅读本文需要的前置知识#xff1a;React、Redux、Typescript、Redux hooks。
Redux-Toolkit使用步骤 …Redux-Toolkit是为了简化使用Redux繁琐的步骤可以j降低使用useReducer与useContext管理状态的频率而且起到项目中状态管理规范和约束化的效果。
阅读本文需要的前置知识React、Redux、Typescript、Redux hooks。
Redux-Toolkit使用步骤
目前使用Redux-Toolkit管理消费redux状态的方式。举个例子假设我们现在的业务和银行转账有关有两个状态存在redux分别为银行账号和金额accountOfBank和amountOfBank使用createSlice来创建reducer和actions
首先安装redux-toolkit依赖包 npm i reduxjs/toolkit npm i react-redux 文件目录
slice.ts
创建切片声明存储状态对象以及action。createSlice创建一个切片slice主要参数 nameslice的标识在redux-devtool中会显示对应的名字initialState初始值对象reducers对象类型以及函数类型函数参数state和传递的action参数extraReducers用于处理异步比如网络请求等 creactSlice返回值是一个对象包含所有的actions。
import { createSlice, PayloadAction } from reduxjs/toolkit;type InitialState {accountOfBank: string,amountOfBank: string
}const initialState: InitialState {accountOfBank: JanPan Bank,amountOfBank: 1000
}const slice createSlice({name: bank,initialState,reducers: {updateBankAccount: (state: InitialState, action: PayloadActionstring) {state.accountOfBank action.payload;},updateBankAmount: (state: InitialState, action: PayloadActionstring) {state.amountOfBank action.payload;}}
})export const {updateBankAccount, updateBankAmount} slice.actions;
export default slice.reducer; store.ts
存在在store中configureStore是Redux-Tookit的一个工厂函数用于创建Redux-Store。
store是通过传入一个reducer缩减器来创建的并通过getState的方法用于返回当前的状态值在Typescript强类型声明中有很大的帮助。
configureStore主要参数 reducer将slice的reducer传入middleware中间件devTools是否配置devTools工具默认为true import { configureStore } from reduxjs/toolkit;
import slice from ./slice;export const store configureStore({reducer: {bank: slice}
})export type BankState ReturnTypetypeof store.getState;
index.tsx
import React from react;
import ReactDOM from react-dom/client;
import App from ./App;
import { Provider } from react-redux;
import { store } from ./toolkit/store;
const root ReactDOM.createRoot(document.getElementById(root) as HTMLElement
);
root.render(Provider store{store}App //Provider
);BankView.tsx
页面UI组件渲染useSelector获取当前管理的statestate的类型可通过store.ts的getState获取
并且将配置在store的reducer提取解构。
import { useDispatch, useSelector } from react-redux;
import { BankState } from ../../toolkit/store;
import { updateBankAccount, updateBankAmount } from ../../toolkit/slice;export const BankView () {const {accountOfBank, amountOfBank} useSelector((state: BankState) state.bank)const dispatch useDispatch();return (divh3accountOfBank - {accountOfBank}/h3h3amountBank - {amountOfBank}/h3button onClick{() dispatch(updateBankAccount(England))}change bank account/buttonspan /spanbutton onClick{() dispatch(updateBankAmount(2000))}change bank amount/button/div)
}
详细目录截图如下 经过上面简单的封装就实现了全局状态管理使用简单高效而且可以实现业务与UI的解耦。
在网络请求等情况通常需要异常更新、提交数据等可通过createAynceThunk实现
import { createAsyncThunk, createSlice, PayloadAction } from reduxjs/toolkit;type InitialState {accountOfBank: string,amountOfBank: string,creatTime: string
}const initialState: InitialState {accountOfBank: JanPan Bank,amountOfBank: 1000,creatTime: 2024-04-02
}export const fetchAccountBank createAsyncThunk(https://wwww.baidu.com,() {return new Promisestring(resolve {let timeId setTimeout(() {clearTimeout(timeId);resolve(2024-04-03);}, 1000)})})const slice createSlice({name: bank,initialState,reducers: {updateBankAccount: (state: InitialState, action: PayloadActionstring) {state.accountOfBank action.payload;},updateBankAmount: (state: InitialState, action: PayloadActionstring) {state.amountOfBank action.payload;}},extraReducers: (builder) {builder.addCase(fetchAccountBank.pending, (state: InitialState) {console.log(fetchAccountBank pending)state.creatTime loading...});builder.addCase(fetchAccountBank.fulfilled, (state, action) {console.log(action.payload)state.creatTime action.payload;console.log(fetchAccountBank fulfilled)});builder.addCase(fetchAccountBank.rejected, (state) {console.log(fetchAccountBank rejected)state.creatTime failed...})}
})export const {updateBankAccount, updateBankAmount,} slice.actions;
export default slice.reducer;因为Typescript语言有较强的类型校验在异步时dispatch报错如下 只需在使用useDispatch时声明泛型类型即可。 // 异步需声明useDispatch类型const asyncDispatch useDispatchAppDispatch();
最佳实践全部代码如下
ReduxToolkitTypeScript最佳实践资源-CSDN文库
