当向 redux 发送数据时调度类型变得无效

Question

这是我的reducer的代码：

import { profileAPI } from '../api/api'
import shortid from 'shortid'

const ADD_POST = 'profile/ADD-POST'
const SET_USER_PROFILE = 'profile/SET_USER_PROFILE'
const SET_STATUS = 'profile/SET_STATUS'
const TOGGLE_IS_FETCHING = 'profile/TOGGLE_IS_FETCHING'
const TOGGLE_IS_FETCHING_POSTS = 'profile/TOGGLE_IS_FETCHING_POSTS'
const DELETE_POST = 'profile/DELETE_POST'
const UPLOAD_PHOTO_SUCCESS = 'profile/UPLOAD_PHOTO_SUCCESS'
const SAVE_PHOTO_SUCCESS = 'profile/SAVE_PHOTO_SUCCESS'
const SET_POSTS = 'profile/SET_POSTS'

type contactsType = {
  telephone: null | number
  vkontakte: null | string
  email: null | string
}
type profileType = {
  userid: number
  name: null | string
  status: null | string
  photo: null | string
  city: null | string
  age: null | number
  contacts: Array<contactsType>
}

type postType = {
  id: number
  msg: string
  likesCount: number
}

let initialState = {
  profile: null as profileType | null,
  posts: [] as Array<postType>,
  isFetching: true as boolean,
  isFetchingPosts: true as boolean
}

export type initialStateType = typeof initialState

function ProfileReducer(state = initialState, action: any): initialStateType
{
  switch(action.type)
  {
    case ADD_POST:
      return {
        ...state,
        posts: [ ...state.posts, {
          id: shortid.generate(),
          msg: action.text,
          likesCount: 0
        }]
      }
    case DELETE_POST:
      return {
        ...state,
        posts: state.posts.filter(p => p.id !== action.postID)
      }
    case SET_USER_PROFILE:
      return { ...state, profile: action.profile }
    case SET_STATUS:
      return {
        ...state,
        profile: {
          ...state.profile,
          status: action.status
        }
      }
    case TOGGLE_IS_FETCHING:
      return { ...state, isFetching: action.isFetching }
    case TOGGLE_IS_FETCHING_POSTS:
      return { ...state, isFetchingPosts: action.isFetching }
    case UPLOAD_PHOTO_SUCCESS:
      return {
        ...state,
        profile: {
          ...state.profile,
          photo: action.photo
        }
      }
    case SAVE_PHOTO_SUCCESS:
      return {
        ...state,
        profile: {
          ...state.profile,
          ...action.profile
        }
      }
    case SET_POSTS:
      return {
        ...state,
        posts: action.posts
      }
    default:
      return state
  }
}

type addPostActionType = { type: typeof ADD_POST, text: string }
export const addPost = (text: string): addPostActionType => ({ type: ADD_POST, text })

type setUserProfileActionType = { type: typeof SET_USER_PROFILE, profile: profileType }
export const setUserProfile = (profile: profileType): setUserProfileActionType => ({
  type: SET_USER_PROFILE,
  profile
})

type setStatusActionType = { type: typeof SET_STATUS, status: string }
export const setStatus = (status: string): setStatusActionType => ({ type: SET_STATUS, status })

type setIsFetchingActionType = { type: typeof TOGGLE_IS_FETCHING, isFetching: boolean }
export const setIsFetching = (isFetching: boolean): setIsFetchingActionType => ({
  type: TOGGLE_IS_FETCHING,
  isFetching
})

type setIsFetchingPostsActionType = { type: typeof TOGGLE_IS_FETCHING_POSTS, isFetching: boolean }
export const setIsFetchingPosts = (isFetching: boolean): setIsFetchingPostsActionType => ({
  type: TOGGLE_IS_FETCHING_POSTS,
  isFetching
})

type deletePostActionType = { type: typeof DELETE_POST, postID: number }
export const deletePost = (postID: number): deletePostActionType => ({ type: DELETE_POST, postID })

type uploadPhotoSuccessActionType = { type: typeof UPLOAD_PHOTO_SUCCESS, photo: string }
export const uploadPhotoSuccess = (photo: string): uploadPhotoSuccessActionType => ({
  type: UPLOAD_PHOTO_SUCCESS,
  photo
})

type saveProfileSuccessActionType = { type: typeof SAVE_PHOTO_SUCCESS, profile: profileType }
export const saveProfileSuccess = (profile: profileType): saveProfileSuccessActionType => ({
  type: SAVE_PHOTO_SUCCESS,
  profile
})

type setPostsActionType = { type: typeof SET_POSTS, posts: Array<postType> }
export const setPosts = (posts: Array<postType>): setPostsActionType => ({ type: SET_POSTS, posts })

export const requestUserProfile = (userid: number) => async (dispatch: any) => {
  let data = await profileAPI.getProfile(userid)
  dispatch(setUserProfile(data))
  dispatch(setIsFetching(false))
}

export const updateStatus = (status: string) => async (dispatch: any) => {
  let data = await profileAPI.updateStatus(status)
  if(data.resultCode === 0)
    dispatch(setStatus(status))
}

export const uploadPhoto = (photo: string) => async (dispatch: any) => {
  let data = await profileAPI.uploadPhoto(photo)
  if(data.resultCode === 0)
    dispatch(uploadPhotoSuccess(data.photo))
}

export const saveProfile = (profile: profileType) => async (dispatch: any) => {
  let data = await profileAPI.saveProfile(profile)
  if(data.resultCode === 0)
    dispatch(saveProfileSuccess(profile))
}

export const requestPosts = (userid: number) => async (dispatch: any) => {
  dispatch(setIsFetchingPosts(true))
  let data = await profileAPI.getPosts(userid)
  dispatch(setPosts(data))
  dispatch(setIsFetchingPosts(false))
}

export default ProfileReducer

它给了我这样一个错误：

/home/i/app/src/redux/Profile.reducer.ts(51,9) 中的 TypeScript 错误： 类型 '(postType | { id: string; msg: any; likesCount: number; })[]' 是 不可分配给类型“postType[]”。输入'postType | { id：字符串； 味精：任何；喜欢计数：数字； }' 不可分配给类型 'postType'。 键入'{ id：字符串；味精：任何；喜欢计数：数字； }' 不可分配给类型 'postType'。 属性“id”的类型不兼容。 类型“字符串”不可分配给类型“数字”。 TS2322

得到的结构：id:string;味精：任何； likesCount: 数量;

他为什么不把数据翻译成initialStateType？我就是看不懂，谷歌也没有答案

Answer 1

您用来生成 ID 的库函数shortid.generate：

shortid.generate()

返回一个字符串。更改postType 以反映id 实际上是一个字符串：

type postType = {
  id: string
  msg: string
  likesCount: number
}