一个意见收集的功能（用户反馈）

现在公司需要一个意见收集的功能（用户反馈）

用户端：用户能够在这个网页上填写自己的反馈信息，然后留下联系方式和姓名。

工作人员处理反馈意见的工具：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)
  })


}, [])