需要澄清react+react-redux钩子+中间件thunk+获取API的问题。

Question

我是新来的 React 和 Redux. 现在学习钩子，真的很困惑.做一个教程应用(老师用的是classes)，应该从jsonplaceholder(async)获取一些API数据，之后用redux使用。目前，我的屏幕上无法显示获取的数据。

另外，在最下面还有我的两个附加问题。

我的代码(没有工作):ERROR:TypeError: posts.map is not a function(类型错误：post.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;

---

动作索引.js

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

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

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

---

apisjsonPlaceholder.js。

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

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

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

---

reducerspostsReducer.js

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

---

我用这个来实现它的工作（在我的屏幕上显示以下帖子）。

组件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) 当我使用Effect时，我是否应该使用一个中间件（比如thunk）？

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

---

工作代码（只修改了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

1. 你使用的是 .then 因为等待通话结束，就像... ... async 告诉代码等待

2. 你需要使用 redux-thunk 如果你想把这个动作作为redux动作运行（因为使用async行为。.then 要么 async)之间没有关系。useEffect 这是反应效应 redux-thunk 属于你的项目的redux部分

3. 你需要 useDispatch 从UI发送功能

---

 const dispatch = useDispatch()

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

---

和 useSelector 用于为组件订阅一个重用道具（如 mapStateToProps)

---

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

---

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