React: TypeError: dispatch is not a function

Question

I want to fetch from redux. I am following this tutorial: https://codesandbox.io/s/react-redux-application-hewdb?file=/src/pages/PostsPage.js

But when i used it in my code that is:

import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import {fetchInterview} from '../actions/interviewActions'

const DetailInterview = (props, { dispatch, loading, interviews, hasErrors }) => {

  console.log("test interview",interviews)
  useEffect(() => {
    const { match: { params: { id } } } = props;
    dispatch(fetchInterview(id))
  }, [dispatch])

  const interviewslist = interviews

  console.log('interview: ', interviews)

  return (
    <div>
      <h3>All participants</h3>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Interview id</th>
            <th>Partcipants id</th>
            <th>Time</th>
          </tr>
        </thead>
        <tbody>
          {
            console.log('interviews:sad ', interviews)
          }
          {
            interviews? interviews.map((interview) => {
              console.log('sadassad',interview)
              console.log('sadaghahhgsghssad',interviews)
              return (
                <tr key={interview.id}>
                  <td>{interview.id}</td>
                  <td>{interview.interview_id}</td>
                  <td>
                    {/* <Link to={`/posts/${post.id}`}> */}
                    {interview.participant_id}
                    {/* </Link> */}
                  </td>
                  <td>{interview.created_at}</td>
                </tr>
              ) 
            }) : null
          }
        </tbody>
      </table>
    </div>
  );
}

// export default DetailInterview;

const mapStateToProps = state => ({
  loading: state.interview.loading,
  interviews: state.interview.interview,
  hasErrors: state.interview.hasErrors,
})
export default connect(mapStateToProps)(DetailInterview)

I get an error: Uncaught TypeError: dispatch is not a function

Could not understand what is the error behind this.

Answer 1

You are destructuring values from the second argument of DetailInterview whereas you should do that from props as values from mapStateToProps and connect are available as props to the connected component

const DetailInterview = (props) => {
    const { dispatch, loading, interviews, hasErrors } = props;
    ...
}