Can't export action creator to component mapDispatchToProps method

Question

In my action file I create a fetchMethod

export const requestEmbedToken = () => (dispatch) => {

    return axios.get('http://localhost:7071/api/getTokens')
        .then(response => {
            console.log("token embed", response)

        })
}

app.js

import { requestEmbedToken } from './redux/actions'

function App(token, requestToken) {
  const [embedToken, setEmbedToken] = useState(token.token);
  useEffect(() => {
    if (token.token === undefined) {
      requestToken()
      setEmbedToken(token.token)
    }
  });
  return (

const mapDispatchToProps = (dispatch) => {
  return ({
    requestToken: () => dispatch(requestEmbedToken())
  })
}
export default connect(mapStateToProps, mapDispatchToProps)(App)

Actually I'm getting an error

TypeError: requestToken is not a function

Answer 1

App component will receive all the props as properties of an object that will be passed as an argument, commonly referred to as props object. You need to destructure the props object to access the token and other props

function App({ token, requestToken }) {
  ...
}

Alternatively, you could use the props object instead of destructuring it

function App(props) {
  ...
}

and then use props.token and props.requestToken to access the props as properties of props object.