如何從 React 組件中重構異步函數

Question

我有一個在AllWords.js中看起來如此簡單的AllWords.js組件：

import React, {  useEffect, useState } from 'react';
import consts from '../../constants/Constants.js';

function AllWords() {
  const [words, setWords] = useState([]);

  async function fetchData(){
    
    const response= await fetch(consts.FETCH_URL);
    const data = await (response.json());
    setWords(data);
  };

  // API:  useEffect( () => { . . . return cleanup; },[var_n_whose_change_triggers_useEffect . . .] );

  useEffect(() => {fetchData()}, [] );

    return (
    <>
    {
      words.map(w=> <div>{w.word}</div>)
    }
    </>
  );
}

export default AllWords;

我想將組件中的fetchData()方法重構為另一個文件（基本上是一個單獨的.js文件，用於保存 fetch 調用）。

我想要的是在src/actions/下創建一個名為FetchAllWords.js的文件，然后導入它。 ＆使用那個。

我有幾個問題：

1. 我是否需要在FetchAllWords.js設置state ，然后使用useSelector在AllWords.js提取狀態？
2. 在FetchAllWords.js ，我是否需要使用usedispatch來調度設置state的方法調用？ 我想剛才setState在FetchAllWords.js然后提取它AllWords.js 。 這是我到目前為止：

import consts from '../constants/Constants.js';
import {  useState } from 'react';


async function FetchAllWords(){
    const [words, setWords] = useState([]);
  
        const response= await fetch(consts.FETCH_URL);
        const data = await (response.json());
        setWords(data);
    
}
 

export default FetchAllWords;

我不確定如何導入它並在AllWords.js使用它。 我正在使用以下語句： import wordList from '../../actions/FetchAllWords';

然后我嘗試使用wordList作為文件'../../actions/FetchAllWords.js'的句柄並嘗試訪問async function FetchAllWords所以wordList.FetchAllWords() ;

首先，盡管調用了導入，編輯器 (VSCode) 也不會讓我看到該函數。

其次，我收到一個錯誤（類似）： TypeError: _actions_FetchAllWords_js__WEBPACK_IMPORTED_MODULE_3__.default.FetchAllWords is not a function

任何見解或幫助將不勝感激，因為對 JS 和 React 相當不安。 github 倉庫是： https : //github.com/mrarthurwhite/hooks-p5-react-redux

編輯：根據大衛的建議：

所以AllWords.js React 組件是：

import React, {  useEffect, useState } from 'react';
import wordList from '../../services/Fetch.js';
function AllWords() {
  const [words, setWords] = useState([]);

  function fetchData(){
    
    wordList.fetchAllWords().then(
      data =>  setWords(data)
    );
  };

  // API:  useEffect( () => { . . . return cleanup; },[var_n_whose_change_triggers_useEffect . . .] );
  useEffect(() => {fetchData()}, [] );

    return (
    <>
    {
      words.map(w=> <div>{w.word}</div>)
    }
    </>
  );
}

export default AllWords;

而Fetch.js是：

import consts from '../constants/Constants.js';

class Fetch { 

async fetchAllWords(){
        const response= await fetch(consts.FETCH_URL);
        const data = await (response.json());
        return data;
}
 
       
}
export default Fetch;

Answer 1

不，不要擔心外部文件中的狀態。 只需專注於它應該做的一件事，即執行 AJAX 操作。 簡而言之，它只是一個函數，例如：

import consts from '../../constants/Constants.js';

const fetchAllWords = async () => {
    const response = await fetch(consts.FETCH_URL);
    const data = await (response.json());
    return data;
}

export default fetchAllWords;

如果您還計划添加其他服務操作，您甚至可以將其設置為包含此功能的類。 （獲取特定單詞？查找單詞？等） 重點是這僅做一件事，即提供數據。 讓 React 組件處理 React 狀態。

在組件中，您只需使用它來獲取數據。 就像是：

import React, {  useEffect, useState } from 'react';
import fetchAllWords from '../../services/FetchAllWords.js';

function AllWords() {
  const [words, setWords] = useState([]);

  useEffect(() => {
    fetchAllWords().then(w => setWords(w));
  }, []);

  return (
    <>
    {
      words.map(w=> <div>{w.word}</div>)
    }
    </>
  );
}

export default AllWords;

總的來說，這是一個分離關注點的問題。 該服務執行 AJAX 操作並返回有意義的數據，內部關注諸如 JSON 反序列化之類的事情。 React 組件維護狀態並呈現輸出，內部關注useEffect運行后更新狀態等。