now everything works with React ToolKit

client/src/components/posts/Posts.js

@@ -1,14 +1,19 @@
-import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import PostItem from './PostItem';
-import PostForm from './PostForm';
-import { getPosts } from '../../actions/post';
+import React, { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import PostItem from "./PostItem";
+import PostForm from "./PostForm";
+import { getPosts } from "../../actions/post";
 
-const Posts = ({ getPosts, post: { posts } }) => {
+const Posts = () => {
+  const dispatch = useDispatch();
   useEffect(() => {
-    getPosts();
-  }, [getPosts]);
+    async function fetchData() {
+      await dispatch(getPosts());
+    }
+    fetchData();
+  }, [dispatch]);
+  const posts = useSelector((state) => state.post.posts);
+ 
 
   return (
     <section className="container">
@@ -26,13 +31,4 @@ const Posts = ({ getPosts, post: { posts } }) => {
   );
 };
 
-Posts.propTypes = {
-  getPosts: PropTypes.func.isRequired,
-  post: PropTypes.object.isRequired
-};
-
-const mapStateToProps = (state) => ({
-  post: state.post
-});
-
-export default connect(mapStateToProps, { getPosts })(Posts);
+export default Posts;