Два компонента, использующие один и тот же компонент

Question

Я пытаюсь избежать дублирования кода в моем проекте, поэтому я решил создать компонент, который могут использовать два других компонента, но он, похоже, не работает. Это как-то связано с использованием хуков (useEffect) или вообще не имеет значения? Это код:

повторно используемый компонент: Сообщения. js

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { makeStyles } from "@material-ui/core/styles";
import CircularProgress from "@material-ui/core/CircularProgress";
import ErrorPage from "../../pages/ErrorPage";
import Post from "./Post";

const useStyles = makeStyles({
  root: {
    margin: "5em",
    textAlign: "center",
  },
  loading: {
    margin: "0 auto",
    marginTop: "50px",
  },
});

export const Posts = ({ action, postsType }) => {
  const classes = useStyles();
  const dispatch = useDispatch();
  const { token } = useSelector((state) => state.auth);

  useEffect(() => {
    dispatch(action(token));
  }, []);

  const { posts, loading, fetched, error } = useSelector(
    (state) => state.posts[postsType]
  );

  return (
    <div className={classes.root}>
      {loading && (
        <CircularProgress
          className={classes.loading}
          size="200px"
          thickness="1"
        />
      )}
      {fetched && posts.map((post) => <Post postData={post} />)}
      {error && <ErrorPage />}
    </div>
  );
};

Компоненты, использующие сообщения. js:

import React from "react";
import { fetchAllPostsByUserId } from "../redux/actions/postsActions";
import { Posts } from "../components/sharedComponents/Posts";

const UserPostsPage = () => (
  <Posts action={fetchAllPostsByUserId} postsType="userPosts" />
);

export default UserPostsPage;

import React from "react";
import { fetchRecommendedPosts } from "../redux/actions/postsActions";
import { Posts } from "../components/sharedComponents/Posts";

const RecommendedUserPostsPage = () => (
  <Posts action={fetchRecommendedPosts} postsType="recommendedPosts" />
);
export default RecommendedUserPostsPage;

это состояние хранилища redux:

const initialState = {
  isPostCreated: false,
  mainPosts: {
    posts: [],
    loading: false,
    fetched: false,
    error: false,
  },
  userPosts: {
    posts: [],
    loading: false,
    fetched: false,
    error: false,
  },
  recommendedPosts: {
    posts: [],
    loading: false,
    fetched: false,
    error: false,
  },
  trendingPosts: {
    posts: [],
    loading: false,
    fetched: false,
    error: false,
  },
};
``

Answer 1

ваш селектор возвращает неправильные результаты, поэтому я спросил вас, правильно ли были заполнены эти свойства. Это должно работать:

  const { posts, loading, fetched, error } = useSelector(
    (state) => state[postsType]
  );

Answer 2

В вашей структуре состояний нет posts.

Кажется, вы ошиблись при доступе к данным.

Пожалуйста, попробуйте это

const { posts, loading, fetched, error } = useSelector(
    (state) => state[postsType]
  );