asyncSlice.ts
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
import { request } from '@/utils/http'
interface SimpleInfo {
oraInfo?: [],
depInfo?: []
}
const initialState: SimpleInfo = {
oraInfo: [],
depInfo: []
}
/**
* 异步请求设置state方法1 payload:UI组件中dispatch(loadDep)传递过来的API地址
* **/
export const loadDep = createAsyncThunk('simpleInfo/loadDep', (payload: any, thunkAPI) => {
request(payload).then((res: any) => {
// eslint-disable-next-line @typescript-eslint/no-use-before-define
thunkAPI.dispatch(setDep(res.data.data))
})
})
/**
* 异步请求设置state方法2 需额外添加extraReducers属性, loadOrg异步方法请求成功时,
* 会自动执行[loadOrg.fulfilled],在里面直接修改state
* (API地址也可在UI组件中dispatch时传递,参考实例1,用payload参数接收)
* **/
export const loadOrg = createAsyncThunk('simpleInfo/loadOrg', () => {
return request('/departments/simple').then((res: any) => res.data.data)
})
const { reducer: SimpleData, actions } = createSlice({
name: 'simpleInfo',
initialState,
reducers: {
setOrg(state, action) {
state.oraInfo = action.payload
},
setDep(state, action) {
state.depInfo = action.payload
}
},
extraReducers: {
// 成功fulfilled时执行的操作 pending等待 rejected拒绝
// @ts-ignore
[loadOrg.fulfilled](state: SimpleInfo, action: any) {
state.oraInfo = action.payload
}
}
})
export const { setOrg, setDep } = actions
export default SimpleData
UI组件中使用:
import { loadDep } from '@/store/slice/asyncSlice'
import { loadOrg } from '@/store/slice/asyncSlice'
// 方式1
const httpClick = () => {
// @ts-ignore
dispatch(loadDep('/departments/simple'))
}
// 方式2
const httpClick1 = () => {
dispatch(loadOrg())
}