如何與其他組件共享 react-redux 連接組件中的功能？

Question

我在 React 組件中定義了一個函數（初始化），用於調度一堆 redux 操作。

 import { setData, doThing, doSomethingElse } from "redux/actions"; import { fetchData } from "services/api"; import { connect } from "react-redux"; class Basic extends Component { initialize = () => { const { setData, doThing, doSomethingElse } = this.props; if (someLogic) { doThing(); } else { doSomethingElse(); } fetchData.then(data => setData(data)); }; componentDidMount() { this.initialize(); } render() { const { loading } = this.props; if (loading) { return <div>Loading...</div>; } return <div>Content</div>; } } const mapStateToProps = ({ state }) => ({ loading: state.loading }); const mapDispatchToProps = { setData, doThing, doSomethingElse }; export default connect(mapStateToProps, mapDispatchToProps)(Basic);

這在這種情況下工作正常，但是當我開發我的應用程序時，我意識到我可能還想在其他幾個組件中調用“初始化”。 我提取此功能以在其他組件中重用的最佳方法是什么？

我很想將它提取到這樣的輔助函數中：

 import store from "redux/store"; export function initializeHelper() { if (someLogic) { store.dispatch(doThing()); } else { store.dispatch(doSomethingElse()); } fetchData.then(data => store.dispatch(setData(data))); }

它確實有效，因為我在輔助函數中導入的商店與我的 React 應用程序中提供的商店相同。 但是，這樣直接打電話給商店感覺不對。

我嘗試過的另一件事是使用渲染道具組件，該組件僅按如下方式傳遞函數：

 class Initialize extends Component { initialize = () => { const { setData, doThing, doSomethingElse } = this.props; if (someLogic) { doThing(); } else { doSomethingElse(); } fetchData.then(data => setData(data)); }; render() { return this.props.children(this.initialize) } } // Wrap any component to pass the function as a prop <Initialize> {initialize => <OtherComponent initialize={initialize} />} </Initialize>

但這也感覺像是對渲染道具模式的錯誤使用，因為渲染道具不共享任何狀態。 它只是共享一個主要調度 redux 操作的函數。

有沒有更好的方法來解決這個問題？

注意：我還沒有計划在我當前的項目中使用 React 鈎子。

Answer 1

看看高階組件。 根據文檔：“高階組件 (HOC) 是 React 中用於重用組件邏輯的高級技術”，這正是您想要做的。

將在您的組件之間共享所需行為的高階組件可能如下所示：

const withInit = (componentToWrap) => (props) => { 
  useEffect(() => { 
    // something to execute on mount
  },[])

  return <componentToWrap {...props}/>
}

文檔也提供了通過類來實現這一點的方法。 希望這可以幫助！

Answer 2

這是HOC 的一個很好的用例。 您有初始化數據的重復模式。 這種和平的代碼可以在 HOC（高階組件）中提取出來，該函數將在其參數之一中呈現要呈現的組件。 此 HOC 將為您的組件執行初始化操作，並使用訂閱的數據作為組件的道具呈現組件。 （如果你需要。你沒有在你的例子中使用它）

HOC 將連接到 redux 並且不需要連接子組件

讓我們看看代碼。

import { setData, doThing, doSomethingElse } from "redux/actions";
import { fetchData } from "services/api";
import { connect } from "react-redux";

const InitializeOnMount = (Component) => {

   class InitializerComponent extends Component {

     initialize = () => {
      const { setData, doThing, doSomethingElse } = this.props;
      if (someLogic) {
        doThing();
      } else {
        doSomethingElse();
      }
      fetchData.then(data => setData(data));
     };

     componentDidMount() {
       this.initialize();
     }

     render() {
       const { loading } = this.props;
       if (loading) {
         return <div>Loading...</div>;
       }
       return <Component />;
     }
   }

   const mapStateToProps = ({ state }) => ({
     loading: state.loading
   });

   const mapDispatchToProps = {
     setData,
     doThing,
     doSomethingElse
   };

   return connect(mapStateToProps, mapDispatchToProps)(InitializerComponent);
};

export {InitializeOnMount};