需要澄清 react + react-redux hooks + middleware thunk + fetching API

Question

我是 React 和 Redux 的新手。现在学习钩子并感到非常困惑。做一个教程应用程序（老师正在使用类）应该从 jsonplaceholder（异步）获取一些 API 数据，然后将其与 redux 一起使用。目前，我无法在屏幕上显示获取的数据。

同样在最底部是我的另外两个问题。

我的代码（不起作用）：错误： TypeError: posts.map 不是一个函数

PostList.js

import React, { useEffect, useState } from "react";
import { fetchPosts } from "../actions";
import { useSelector } from "react-redux";

const PostList = () => {
    const [ posts, getPosts ] = useState("");
    // posts = useSelector((state) => state.posts);
    // const dispatch = useDispatch();

    useEffect(() => {
        setPosts(fetchPosts());
    }, []);

    return (
        <div className="ui relaxed divided list">
             <ul>{posts.map((post) => <li key={post.id}>{post.title}</li>)}</ul>
        </div>
    );
};

export default PostList;

action/index.js

import jsonPlaceholder from "../apis/jsonPlaceholder";

export const fetchPosts = () => async (dispatch) => {
    const response = await jsonPlaceholder.get("/posts");

    dispatch({ type: "FETCH_POSTS", payload: response.data });
};

apis/jsonPlaceholder.js

import jsonPlaceholder from "../apis/jsonPlaceholder";

export const fetchPosts = () => async (dispatch) => {
    const response = await jsonPlaceholder.get("/posts");

    dispatch({ type: "FETCH_POSTS", payload: response.data });
};

reducers/postsReducer.js

export default (state = [], action) => {
    switch (action.type) {
        case "FETCH_POSTS":
            return action.payload;
        default:
            return state;
    }
};

我让它工作（用以下内容在我的屏幕上显示帖子）：

components/PostList.js

import React, { useEffect, useState } from "react";
import { fetchPosts } from "../actions";
import axios from "axios";

const PostList = () => {
    const [ posts, setPosts ] = useState([]);

    useEffect(() => {
        axios
            .get("https://jsonplaceholder.typicode.com/posts")
            .then((response) => {
                console.log(response);
                setPosts(response.data);
            })
            .catch((err) => {
                console.log(err);
            });
    }, []);

    return (
        <div className="ui relaxed divided list">
            <ul>{posts.map((post) => <li key={post.id}>{post.title}</li>)}</ul>
        </div>
    );
};

export default PostList;

1) 但是我没有在useEffect 中使用任何async 和await。这是正确的吗？

2) 使用 useEffect 时是否应该使用中间件（如 thunk）？

3) 像 useSelector 和 useDispatch 这样的 redux hooks 是什么，我应该在哪里使用它们或者我应该使用 react hooks 还是 redux hooks？

工作代码（只更改了 PostList.js 文件）：

import React, { useEffect } from "react";
import { fetchPosts } from "../actions";
import { useSelector, useDispatch } from "react-redux";

const PostList = () => {
    // const [ posts, setPosts ] = useState([]);
    const posts = useSelector((state) => state.posts);
    const dispatch = useDispatch();

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

    return (
        <div className="ui relaxed divided list">
            <ul>{posts.map((post) => <li key={post.id}>{post.title}</li>)}</ul>
        </div>
    );
};

export default PostList;

Answer 1

您正在使用 .then 等待呼叫结束，就像 async 告诉代码等待
如果你想运行这个动作作为redux动作，你需要使用redux-thunk（因为异步行为的使用，.then或者async), useEffect 与属于项目的 redux 部分的 redux-thunk 之间没有关系
你需要 useDispatch 从 UI

 const dispatch = useDispatch()

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

和 useSelector 用于订阅组件的 redux 道具（如 mapStateToProps）

  const posts = useSelector((state) => state.posts);

如果你同时使用它们，const [ posts, getPosts ] = useState([]);不需要

需要澄清 react + react-redux hooks + middleware thunk + fetching API

Need clarification for react + react-redux hooks + middleware thunk+ fetching API

reactjs

redux

redux-thunk

react-redux

react-hooks