现在公司需要一个意见收集的功能(用户反馈)
用户端:用户能够在这个网页上填写自己的反馈信息,然后留下联系方式和姓名。
工作人员处理反馈意见的工具:PC端网站,能够展示所有的反馈信息及用户信息,然后通过拨打电话,沟通信息,最后可以修改信息状态。
产品
原型图大概就是这个样子
设计师
原型设计我就不展示出来了
前端和后台
沟通接口文档
用户端:
- POST /feedback 传递反馈信息content 姓名username 联系方式 tel 提交成功返回成功的信息 {code: 0, msg: "请求成功"}
PC端:
- GET /feedback 获取信息 {page,limit} {data: [{id, content, username, tel}]}
- PATCH /feedback/:id 将对应的状态变成已沟通 id 给你返回修改后的结果
用户端Vue3
PC端 React
Redux + TS的配置问题
Redux默认对TS支持不够友好,我们需要进行相关的配置
1. 配置RootState和AppDispatch
在生成store(调用configureStore方法)的位置,在我们的项目中,这个东西在store/index.ts中
const store = configureStore({
reducer: {
feedbackReducer
}
})
export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch
export default store
2. 配置Hooks
我们需要改写useSelector和useDispatch两个Hook,我们可以在store下创建hooks.ts文件
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
import type { RootState, AppDispatch } from './index'
// Use throughout your app instead of plain `useDispatch` and `useSelector`
export const useAppDispatch = () => useDispatch<AppDispatch>()
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
3. 在使用异步的函数的位置
声明一个类型
export type AppThunk<ReturnType = Promise<void>> = ThunkAction<
ReturnType,
RootState,
unknown,
AnyAction
注意:因为这个类型中需要用ThunkAction类型,所以需要安装模块`redux-thunk`
如果我们在使用时,dispatch的函数想要用async函数,则设置为Promise<void>
export const getData = (): AppThunk => async (dispatch) => {
let {data} = await GET_FEEDBACK({})
// data.data就是我们的数据
dispatch(setData(data.data))
}
4. 在组件中调用对应的dispatch
这里的dispatch要用useAppDispatch生成的dispatch
let dispatch = useAppDispatch()
let data = useSelector((state: any) => state.feedbackReducer.data)
let [loading, setLoading] = useState(false)
useEffect(() => {
setLoading(true)
dispatch(getData()).then(() => {
setLoading(false)
})
}, [])