Javascript 尝试分派类型时，不再调用函数

我目前正在尝试使用Spotify API访问我的数据。这很有效。这就是我用来获取数据的函数。我想其他的东西并不重要。如果你需要的话，我可以贴出来

export const getSpotifyUser = (access_token:string) =>{
     setAuthorizationHeader(access_token)
     axios.get('https://api.spotify.com/v1/me').then((res) => {
      console.log(res.data)
    })
  } 

我已经建立了一个redux存储，并试图通过分派正确的类型（set_USER）将凭据放入存储

但是一旦我使用dispatch，这个函数就不再被调用了。 我真的看不出我的错误。那是打字错误吗？。（我正在使用react-typescript）

store.js

import { createStore, applyMiddleware } from 'redux'
import rootReducer from './rootReducer'
import { composeWithDevTools } from 'redux-devtools-extension'
import thunk from 'redux-thunk'

const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(thunk))
)

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch
export default store

userReducer.ts

 import { combineReducers } from 'redux'
    import userReducer from './User/userReducer'
    
    const rootReducer = combineReducers({
      user: userReducer,
    })
    
    export default rootReducer

 import { AnyAction } from 'redux'

import { SET_USER } from './userTypes'

interface Credentials {
  username: string
  email: string
  profilepicture: string
  id: number
}

interface InitialState {
  authenticated: boolean
  loadding: boolean
  credentials?: Credentials
}

const initialState: InitialState = {
  authenticated: false,
  loadding: false,
  credentials: {} as Credentials,
}

const reducer = (state = initialState, action: AnyAction)  => {
  switch (action.type) {
    case SET_USER: {
      return {
        ...state,
        loading: false,
        credentials: action.payload,
      }
    }
    default:
      return state
  }
}

export default reducer

Login.tsx（我在这里登录。如果我不使用dispatch，它工作正常

 import {  IonButton } from '@ionic/react'
    
    import React, { useEffect } from 'react'
    
   
    import {
      getAuthorizeHref,
      getHashParams,
      removeHashParamsFromUrl,
      getSpotifyUser,
    } from '../../Helpers/login'
    
           const Login: React.FC = () => {
      // const user = useSelector((state: RootState) => state.user.credentials)
    
      useEffect(() => {
        const hashParams = getHashParams()
        const access_token = hashParams.access_token
        // const expires_in = hashParams.expires_in
        removeHashParamsFromUrl()
      
        getSpotifyUser(access_token)
      }, [])
    return (
      <IonButton onClick={() => window.open(getAuthorizeHref(), '_self')}>
    )}
    export default Login

从'@ionic/react'导入{IonButton}
从“React”导入React，{useffect}
进口{
getAuthorizeHref，
getHashParams，
移除HashParamsFromURL，
getSpotifyUser，
}来自“../../Helpers/login”
常量登录：React.FC=（）=>{
//const user=useSelector（（状态：RootState）=>state.user.credentials）
useffect（（）=>{
const hashParams=getHashParams（）
const access_token=hashParams.access_token
//const expires_in=hashParams.expires_in
removeHashParamsFromUrl（）
getSpotifyUser（访问令牌）
}, [])
返回(
window.open（getAuthorizeHref（），“\u self”）}>
)}
导出默认登录名

由于您将typescript与react一起使用，我相信您已经将getSpotifyUser函数添加到了界面中，现在如果您想访问它，我认为您应该这样调用它

props.getSpotifyUser（访问令牌）

最后将其作为包装组件的分派函数添加到connect中

您的登录组件应该与此类似

从'@ionic/react'导入{IonButton}
从“React”导入React，{useffect}
从“react redux”导入{connect}
进口{
getAuthorizeHref，
getHashParams，
移除HashParamsFromURL，
getSpotifyUser，
}来自“../../Helpers/login”
界面伊洛金{
getAuthorizeHref:（）=>任何；
getHashParams:（）=>任何；
removeHashParamsFromUrl:（）=>any；
getSpotifyUser：（访问_令牌）=>任意；
}
const Login:React.FC=（props:ILogin）=>{
//const user=useSelector（（状态：RootState）=>state.user.credentials）
useffect（（）=>{
const hashParams=props.getHashParams（）
const access_token=hashParams.access_token
//const expires_in=hashParams.expires_in
props.removeHashParamsFromUrl（）
props.getSpotifyUser（访问令牌）
}, [])
返回(
window.open（props.getAuthorizeHref（），'\u self'）}>
)}
导出默认连接（null，{getAuthorizeHref，getHashParams，removeHashParamsFromUrl，getSpotifyUser}）（登录）

基本上，Shamim给出了正确的答案。任何使用该分派的函数都是一个redux操作，您必须按照文档中的说明调用该函数。您必须使用connect来调用分派操作。您也可以使用dispatchHook。如果我错了，请纠正我

这是正确的代码，我刚刚需要更正Login.tsx

import { IonApp, IonButton } from '@ionic/react'

import React, { useEffect } from 'react'
import { connect } from 'react-redux'

import {
  getAuthorizeHref,
  getHashParams,
  removeHashParamsFromUrl,
  getSpotifyUser,
} from '../../Helpers/login'

const style = {
  Logo: {
    display: 'flex',
    justifyContent: 'space-evenly',
    color: 'white',
    position: 'relative',
    top: '70%',
  } as const,
}

const Login: React.FC = (props: any) => {
  // const user = useSelector((state: RootState) => state.user.credentials)

  useEffect(() => {
    const hashParams = getHashParams()
    const access_token = hashParams.access_token
    // const expires_in = hashParams.expires_in
    removeHashParamsFromUrl()
    console.log('halloeuseeffect')
    props.getSpotifyUser(access_token)
    console.log('halloeuseeffect')
  }, [])

  return (
    <IonApp>
      
     
          <IonButton onClick={() => window.open(getAuthorizeHref(), '_self')}>
            knsnan
        
    </IonApp>
  )
}

export default connect(null, {
  getSpotifyUser,
})(Login)

从'@ionic/react'导入{IonApp，IonButton}
从“React”导入React，{useffect}
从“react redux”导入{connect}
进口{
getAuthorizeHref，
getHashParams，
移除HashParamsFromURL，
getSpotifyUser，
}来自“../../Helpers/login”
常量样式={
标志：{
显示：“flex”，
为内容辩护：“间隔均匀”，
颜色：'白色'，
位置：'相对'，
排名前：“70%”，
}作为康斯特，
}
const Login:React.FC=（道具：任意）=>{
//const user=useSelector（（状态：RootState）=>state.user.credentials）
useffect（（）=>{
const hashParams=getHashParams（）
const access_token=hashParams.access_token
//const expires_in=hashParams.expires_in
removeHashParamsFromUrl（）
console.log（'halloeuseeffect'）
props.getSpotifyUser（访问令牌）
console.log（'halloeuseeffect'）
}, [])
返回(
window.open（getAuthorizeHref（），“\u self”）}>
克南
)
}
导出默认连接（空{
getSpotifyUser，
})（登入）

你的编译器告诉你什么？我不知道redux，但我很确定你的dispatch参数不应该出现在这里，这是一个错误的语法。据我所知，你应该在对象上调用dispatch方法。你确定吗？这是我学到的方法。我没有使用dispatch Hook来澄清。例如，他也在这样做你能把你的意思写出来吗？：）好的，实际上语法是错误的，你忘了第二个=>箭头函数man。但是你应该有一个编译器告诉你这一点，或者至少记录你的typescript错误。哦，sry，我只是错误地删除了第二个=>而已，当我写我的postNo时，我没有在我的界面中添加getSpotifyUser。我不需要那样做。这些函数工作得很好，直到我使用（dispatch:any）=>…也许我错了，没有看到我的错误。你能发布你真正想要的代码吗？在你将dispatch附加到函数之前，该函数工作得很好？useDispatch（）是更好的选择，但我也没有使用这个钩子。我正在传递一个异步函数，该函数正在分派一个类型：该函数甚至没有被调用。此外，在您的方法中，使用该分派的任何函数都是一个redux操作，您必须按照文档的规定专门调用该函数，如果不这样做，该函数将不会被调用

import { IonApp, IonButton } from '@ionic/react'

import React, { useEffect } from 'react'
import { connect } from 'react-redux'

import {
  getAuthorizeHref,
  getHashParams,
  removeHashParamsFromUrl,
  getSpotifyUser,
} from '../../Helpers/login'

const style = {
  Logo: {
    display: 'flex',
    justifyContent: 'space-evenly',
    color: 'white',
    position: 'relative',
    top: '70%',
  } as const,
}

const Login: React.FC = (props: any) => {
  // const user = useSelector((state: RootState) => state.user.credentials)

  useEffect(() => {
    const hashParams = getHashParams()
    const access_token = hashParams.access_token
    // const expires_in = hashParams.expires_in
    removeHashParamsFromUrl()
    console.log('halloeuseeffect')
    props.getSpotifyUser(access_token)
    console.log('halloeuseeffect')
  }, [])

  return (
    <IonApp>
      
     
          <IonButton onClick={() => window.open(getAuthorizeHref(), '_self')}>
            knsnan
        
    </IonApp>
  )
}

export default connect(null, {
  getSpotifyUser,
})(Login)