Reactjs 加载应用程序时无法最初分派操作

我有一个mern应用程序，我正在使用redux来维护我帖子的状态，我想在应用程序第一次运行时（当应用程序组件最初加载时）从我的api获取所有数据，但我无法实现。它只在我发布一些东西并获取帖子时起作用，但它最初并不从db获取所有帖子。 经过一天的努力，我决定在这里提问

这是我的组件树：

在我的PostsBody中，我希望在应用程序最初加载时（这没有发生）从数据库中获取所有帖子，然后在状态发生更改（如create、delete）时，它应该获取更新的帖子（这正在发生）。 这是我的PostsBody组件：

import React, { useEffect } from "react";
import { useDispatch, useSelector } from 'react-redux';

import Post from "./Post";
import { getPostsAction } from '../actions/posts';

const PostsBody = () => {

    const dispatch = useDispatch();

    // fetching posts
    useEffect(() => {
        dispatch(getPostsAction);
    }, [dispatch]);

    const posts = useSelector((globalState) => globalState.postsReducer);
    console.log(posts); // intially empty when the app reloads/renders.

    return (
            // simply posts.map to display individual posts
    );
}

export default PostsBody;

行动：

export const getPostsAction = () => async (dispatch) => {
    try {
        const { data } = await getAllPosts();
        const action = {
            type: 'GET_ALL',
            payload: data,
        }
        dispatch(action);
    } catch (error) {
        console.log(error.message);
    }
}

获取呼叫：

import axios from 'axios';

const url = "http://localhost:5000/users";

export const getAllPosts = () => axios.get(url);

减速器：

const postsReducer = (posts=[], action) => {
    switch (action.type) {
        case 'GET_ALL':
            return action.payload;
        case 'CREATE':
            return [...posts, action.payload];
        default: return posts;
    }
}

export default postsReducer;

我重复一遍，唯一的问题是，当应用程序呈现时，它最初并没有从db获取所有帖子，之后当我创建一个新帖子时，它确实会获取该帖子（并非全部从db获取）。

问题 似乎您没有正确调用

getPostsAction

操作创建者。另外，在

useffect

的依赖项数组中使用only

dispatch

，挂载组件时只调用一次挂钩回调

解决方案 调用

getPostsAction

操作

useEffect(() => {
  dispatch(getPostsAction()); // <-- invoke
}, [dispatch]);

我对Thunks有基本的了解，但是如果上述方法不起作用，那么您可能需要复制一些行为，或者将其分解为两个动作创建者使用的一些通用实用程序代码

export const createPostAction = (newPostData) => async (dispatch) => {
  try {
    await createPost(newPostData);
    const { data } = await getAllPosts();
    const action = {
        type: 'GET_ALL',
        payload: data,
    }
    dispatch(action);
  } catch (error) {
    console.log(error.message);
  }
}

---

为什么不使用connect而不是useDispatch和useSelector？@yahyaparvar“use connect”是什么意思？我想你实际上需要调用动作创建者，让它返回thunk，即

dispatch（getPostsAction（））。你能解释一下“不是全部来自db”是什么意思吗？@DrewReese，就像它最初不会从db中获取所有帖子一样，但当我从react应用程序创建帖子时，它只会获取最近创建的帖子，而不是存储在db中的以前的帖子（不是db中的所有帖子）。因此，您的意思是在useffect之外只需调用
dispatch（getPostsAction（））？所以没有从数据库中提取任何内容？这是正确的理解吗？是否可以包含从数据库获取并发送操作以更新状态的异步代码，包括reducer代码？
export const createPostAction = (newPostData) => async (dispatch) => {
  try {
    await createPost(newPostData);
    const { data } = await getAllPosts();
    const action = {
        type: 'GET_ALL',
        payload: data,
    }
    dispatch(action);
  } catch (error) {
    console.log(error.message);
  }
}