Redux thunk fetch 返回 function 而不是值

Question

大家好我是初學者，目前正在學習編程，我正在嘗試制作一個從 reddit 獲取帖子並將其顯示在網站上的 webapp，當我登錄時，我創建了一個異步 thunk 來從 reddit API 獲取數據到控制台顯示數據，但每當我嘗試調用提取 function 並將其保存到 const 而不是像往常一樣返回 object 時，它返回 function。

reddit.js 中“fetchNewPosts()”返回的數組圖片和 postSlice.js 中“getPosts()”的獲取調用

reddit.js API 獲取 function

export const API_URL = 'https://www.reddit.com';

export const fetchNewPosts = () => async () => {
    const response = await fetch(`${API_URL}/new.json`);
    const json = await response.json();
    console.log(json.data.children.map((post) => post.data))
    const posts = json.data.children.map((post) => post.data)
    return posts
}

Feed.jsx 'fetchNewPosts()' 在 Feed.jsx 中發送時呈現 object w/ 25 個帖子

import React from 'react';
import {Stats} from '../components/Stats';
import { Post } from '../components/Post/Post'
import { useDispatch, useSelector } from 'react-redux';
import './Feed.css'
import { useEffect } from 'react';
import { getPosts } from '../api/postsSlice';
import { fetchNewPosts } from '../api/reddit';


export const Feed = () => {
  const allInfo = useSelector(state => state.postsReducer);
  const { posts, isLoading, error } = allInfo;
  const dispatch = useDispatch();

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

...

postsSlice.js

    import { createSlice } from "@reduxjs/toolkit";
import { fetchNewPosts } from "./reddit";


export const postsSlice = createSlice({
    name: 'postsSlice',
    initialState: {
        posts: [],
        isLoading: false,
        error: false,
        errorMessage: '',
        searchTerm: '',
    },
    reducers: {
        startGetPosts (state) {
            state.isLoading = true;
        },
        getPostsSuccess (state, action) {
            state.isLoading = false;
            state.posts = action.payload;
        },
        getPostsFailed (state, action) {
            state.isLoading = false;
            state.error = true;
            state.errorMessage = action.payload;
        }
    }
})



export const getPosts = () => async (dispatch) => {
    try {
        dispatch(startGetPosts());
        const posts = await fetchNewPosts();
        console.log(posts)
        dispatch(getPostsSuccess());
    } catch (error) {
        dispatch(getPostsFailed(error.message))
    }
}


export const selectPosts = (state) => state.postsSlice.posts;

export const { 
    startGetPosts, 
    getPostsSuccess, 
    getPostsFailed 
} = postsSlice.actions;

export default postsSlice.reducer; 

我很感激我能得到的任何反饋。

Answer 1

您缺少的關鍵是，在 Redux 中更新 state 的唯一方法是“發送”描述“發生了什么”並包含描述/數據的操作 object！ 現在您的代碼沒有這樣做。

fetchNewPosts看起來像這樣：

export const fetchNewPosts = () => async () => {
    const response = await fetch(`${API_URL}/new.json`);
    const json = await response.json();
    console.log(json.data.children.map((post) => post.data))
    const posts = json.data.children.map((post) => post.data)
    return posts
}

大部分都沒問題。

它具有“thunk action creator”的形式，其中有一個內部 function 可以執行一些異步工作。 那挺好的。

前三行很好，一直到const posts = data.children.map() 。 您發出了請求，取回了數據，並提取了您需要的內容。

但是， return posts是錯誤的。 您需要分派一個包含該值的操作，而不是返回該值。

幸運的是，當它們被調用時，thunk 函數被賦予 Redux dispatch function。 所以，你可以把它改成這樣：

// Add dispatch as an arg to the inner function
export const fetchNewPosts = () => async (dispatch) => {
    const response = await fetch(`${API_URL}/new.json`);
    const json = await response.json();

    const posts = json.data.children.map((post) => post.data)
    // Dispatch an action containing the data
    // Assume that `somePostsReceivedAction` is defined elsewhere
    dispatch(somePostsReceivedAction(posts));
}

請注意，如果您使用我們的官方 Redux 工具包 package，這會變得更容易。它有一個createAsyncThunk API，它讓您只需發出請求並返回數據，並為您分派操作：

const fetchNewPosts2 = createAsyncThunk(
  'posts/fetchNewPosts',
  async () => {
    const response = await fetch(`${API_URL}/new.json`);
    const json = await response.json();
    return son.data.children.map((post) => post.data)
  }
)

請參閱我們的 Redux 文檔教程，以更好地了解什么是 thunk、如何使用它們以及如何使用 Redux 工具包：

• https://redux.js.org/tutorials/essentials/part-5-async-logic
• https://redux.js.org/tutorials/fundamentals/part-6-async-logic
• https://redux.js.org/usage/writing-logic-thunks