Блог

В настоящее время я пытаюсь получить доступ к своим данным с помощью 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, функция больше не вызывается.
Я действительно не вижу своей ошибки. Это ошибка typescript ?. (Я использую 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
 

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
 

поскольку вы используете typescript с react, я полагаю, что вы добавили функцию getSpotifyUser в свой интерфейс, теперь, если вы хотите получить к ней доступ, я думаю, вам следует назвать ее так

props.getSpotifyUser(access_token)

и, наконец, добавьте ее в свой connect в качестве функции отправки, которая обертывает ваш компонент

ваш компонент входа в систему должен быть таким

 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) 

В основном Шамим дал правильный ответ.Любая функция, которая использует эту отправку, является действием redux, и вы должны следовать документам специально для вызова этой функции. Вы должны использовать действия подключения к отправке. В качестве альтернативы вы можете использовать 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)