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

Question

我目前正在尝试使用 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) 将凭据放入存储中。

 export const getSpotifyUser = (access_token:string) => (dispatch: any) => {
console.log("function is not called") // Function is not even called why ?
         setAuthorizationHeader(access_token)
         axios.get('https://api.spotify.com/v1/me').then((res) => {
          console.log(res.data)
    dispatch ({
    type: SET_USER,
    payload: res.data
        })
      } 

但是一旦我使用了 dispatch，这个函数就不再被调用了。 我真的没有看到我的错误。那是打字稿错误吗？ （我正在使用反应打字稿）

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

rootReducer.ts

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

userReducer.ts

 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（我在这里登录。它工作正常，如果不使用调度

 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

Answer 1

由于您使用带有 react 的 typescript，我相信您已将 getSpotifyUser 函数添加到您的界面中，现在如果您想访问它，我认为您应该这样称呼它

props.getSpotifyUser(access_token)

最后将它作为包装组件的调度函数添加到您的连接中

你的登录组件应该是这样的

import {  IonButton } from '@ionic/react'
    
import React, { useEffect } from 'react'

import { connect } from 'react-redux'

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

interface ILogin {
  getAuthorizeHref: () => any;
  getHashParams: () => any;
  removeHashParamsFromUrl: () => any;
  getSpotifyUser: (access_token) => any;
}

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

  useEffect(() => {
    const hashParams = props.getHashParams()
    const access_token = hashParams.access_token
    // const expires_in = hashParams.expires_in
    props.removeHashParamsFromUrl()
  
    props.getSpotifyUser(access_token)
  }, [])
return (
  <IonButton onClick={() => window.open(props.getAuthorizeHref(), '_self')}>
)}
export default connect(null, {getAuthorizeHref, getHashParams, removeHashParamsFromUrl, getSpotifyUser})(Login)

Answer 2

基本上，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)