我构建了我的 HOC，因此它可以被调用两次。在这种情况下如何连接 redux

Question

我构建了我的 HOC，因此它可以被调用两次“函数式编程”。现在我无法连接 redux 来获取状态和一些功能。请帮助我如何在这种情况下连接 redux。我尝试过的一切都导致抛出错误。

import React from "react"

export default (WrappedComponent) => {

  return (mapFunctions) => {
    return function({ ...props }) {
      const [open, setOpen] = React.useState(false);

      // typical functionality of the HOC
      //search function 
      const handleSearch = (e) => {
        let filter,
          table,
          tableRow,
          tableCells,
          txtValue,
          results = [];

        filter = e.currentTarget.value.toLowerCase();
        table = document.querySelector(`#${mapFunctions.tableID}`);
        tableRow = table.getElementsByTagName("tr");

        Array.from(tableRow).forEach((row, index) => {
          tableCells = row.getElementsByTagName("td")[1];

          if (tableCells) {
            txtValue = tableCells.textContent || tableCells.innerText;
            if (txtValue.toLowerCase().indexOf(filter) > -1) {
              return mapFunctions.searchFuncReasult === "array" ?
                results.push(row) :
                (tableRow[index].style.display = "");
            } else {
              return mapFunctions.searchFuncReasult === "array" ?
                results.push(row) :
                (tableRow[index].style.display = "none");
            }
          }
        });
      };

      return (
        <WrappedComponent {...props} handleSearch={handleSearch} /> 
      );
    };
  };
};

Answer 1

如果你想将包装组件连接到 redux 在你的高阶组件中 ，那么你可以重构你的 HOC 来定义一个“内部”功能组件，然后也可以由 conenct 高阶组件包裹（或者您可以直接在组件中使用 react-redux 的 useDispatch 和 useSelector 挂钩）。

import React from "react"

export default (WrappedComponent) => (mapFunctions) => {
  const component = (props) => { // <-- will contain inject props from Redux
    const [open, setOpen] = React.useState(false);

    // typical functionality of the HOC
    //search function
    const handleSearch = (e) => {
      let filter,
        table,
        tableRow,
        tableCells,
        txtValue,
        results = [];

      filter = e.currentTarget.value.toLowerCase();
      table = document.querySelector(`#${mapFunctions.tableID}`);
      tableRow = table.getElementsByTagName("tr");

      Array.from(tableRow).forEach((row, index) => {
        tableCells = row.getElementsByTagName("td")[1];

        if (tableCells) {
          txtValue = tableCells.textContent || tableCells.innerText;
          if (txtValue.toLowerCase().indexOf(filter) > -1) {
            return mapFunctions.searchFuncReasult === "array"
              ? results.push(row)
              : (tableRow[index].style.display = "");
          } else {
            return mapFunctions.searchFuncReasult === "array"
              ? results.push(row)
              : (tableRow[index].style.display = "none");
          }
        }
      });
    };

    return <WrappedComponent {...props} handleSearch={handleSearch} />;
  };

  const mapStateToProps = (state) => ({
    // ... any redux state selectors
  });

  const mapDispatchToProps = {
    // ... any redux action creators
  };

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

我在组合多个 HOC 来装饰组件时使用的另一种常见模式是将它们组合在一起。如果您正在使用 react-redux 那么您可能已经在使用 redux 作为依赖项，它会导出这样一个 compose 实用程序。您可能已经使用它将所有减速器组合成一个根减速器。在我看来，这是更简单的解决方案，特别是因为它看起来并不像你 实际上 需要注入的 redux props in 你的 HOC 包装器。

import { compose } from 'redux';

...

export default compose(
  connect(mapStateToProps, mapDispatchToProps),
  YourCustomHOC
)(ComponentYouWantToWrap)(customMapFunctions);

如果您颠倒 HOC 的参数顺序

export default (mapFunctions) => (WrappedComponent) => {

那你可以稍微简化一下构图

export default compose(
  connect(mapStateToProps, mapDispatchToProps),
  YourCustomHOC(customMapFunctions),
)(ComponentYouWantToWrap);

我构建了我的 HOC，因此它可以被调用两次。在这种情况下如何连接 redux

I structured my HOC so it could be invoked twice. How do I connect redux in this context

javascript

reactjs

react-redux

higher-order-functions

higher-order-components