Question

我正在构建一个类似web-app的Instagram，并在供稿页面上显示用户的帖子。通过调度redux操作来获取帖子。现在，帖子可以包含媒体，我必须单独获取它们，所以对我来说，将其存储在redux存储中没有意义，因为它们只需要单个帖子可用，其他任何人都可以使用。所以基本上我的代码结构如下：

PostCard.js

const PostCard = ({ post }) => {

    const [loadingMedia, setLoading] = useState(true)
    const [medias, setMedias] = useState([]);

    const { age_of_post_in_seconds, created_by, has_media, uuid, text, like_count_total, comments_total, liked_by_me, bookmarked_by_me } = post;

    useEffect(() => {
        if (has_media) fetchMedia();
        else setLoading(false);
    }, [])

    async function fetchMedia() {
        setLoading(true);
        const medias = await getPostMedia(uuid);
        if (!medias) console.log('there was an error')
        else setMedias(medias);
        setLoading(false);
    }

{.....more irrelevant code.....}

    return (
        <Body>
            <Card>
                <Header caption={text} name={created_by.handle} time={age_of_post_in_seconds} uniqueName={created_by.display_name} avatar={created_by.profile_photo} />
                {has_media && !loadingMedia && <Media medias={medias} />}
                <Footer
                    likes={like_count_total}
                    liked={liked_by_me}
                    bookmarked={bookmarked_by_me}
                    id={uuid}
                    likePost={handleLikePost}
                    bookmarkPost={handleBookmarkPost}
                    showComments={handleShowComments}
                    comments_total={comments_total}
                />
                {visibleComments && <Comment comments={comments} />}
                {<AddComment postId={uuid} sendComment={handleCommentPost} />}
            </Card>
        </Body>
    )
}

export default PostCard;

，并且我的操作 redux操作和普通操作都存储在该文件中

{----some code---}

export const fetchPosts = () => async (dispatch) => {
    dispatch({ type: FETCHING_FEED_POSTS })
    await vueApi.get('/posts')
        .then((response) => {
            dispatch({ type: FETCH_FEED_POSTS_SUCCESS, payload: response.data })
            history.push('/home')
        })
        .catch((e) => {
            console.log('fetch posts failed with error', e)
            dispatch({ type: FETCH_FEED_POSTS_FAILED, payload: e })
        })
}


export const getPostMedia = async (id) => {
    let error = false;
    const response = await vueApi.get(`/posts/${id}/media`)
        .catch((e) => error = true);
    if (!error) return response.data
    else return false
}

现在我的问题是：1）在这种情况下混合使用redux和本地状态是否2）在同一action.js文件中混合使用redux操作和“普通”操作是不是一种错误的做法？

对Redux和本地状态做出反应的最佳实践

0 个答案: