在尝试调度类型时,不再调用函数



我目前正在尝试使用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,就不再调用该函数。我真的没有意识到我的错误。这是打字错误吗?。(我使用的是react字体(

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(我在这里登录。如果没有使用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

由于您使用的是带有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)

Basicly 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)

相关内容

  • 没有找到相关文章

最新更新