Question

给出了以下React组件：

import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { store, StoreState } from "../../redux/actions";
import { setBackgroundAction } from "../../redux/title.actions";
import "./Loader.scss";

interface ReduxProps {
  bgClass: string;
}

interface Props extends ReduxProps {
  bgChange?: boolean;
}

export default function Loader(props: Props) {
  const [bgClassOld, setBgClassOld] = useState<string>("");
  const dispatch = useDispatch();

  useEffect(() => {
    const { bgChange, bgClass } = props;
    if (bgChange) {
      setBgClassOld(bgClass);
      dispatch(setBackgroundAction("bg-white"));
      dispatch(setBackgroundAction(bgClassOld));
    }
  });

  return (
    <div className="d-flex">
      <div className="loader">
        <img src="/loadscreen.gif" />
      </div>
    </div>
  );
}

// function mapping(state: StoreState): ReduxProps {
//   return {
//     bgClass: state.title.backgroundClass,
//   };
// }

这是一个理论上的问题，以了解如何实际进行以下更改：

组件Loader将从另一个npm包（共享组件）中导入。我的问题是，当前的实现中包含一个redux状态（将其从Class更改为Functional组件，因此mapping()仍然存在）。

由于我仅在“主”客户端中导入组件，因此我将没有完整的redux设置。所以我认为我需要通过store传递dispatch和props函数。

那么我应该为我的组件创建一个道具store，以便在导入共享组件时在其中传递redux存储吗？

我还为每个调度功能创建两个道具吗？

是合理的还是有更好的方法？

Answer 1

通常，您不应该将Redux存储直接导入到组件中。挂钩允许您的组件访问由<Provider>注入到组件树中的Redux存储。

您也不需要通过dispatch作为道具。任何组件都可以调用useDispatch()，并将操作分派到实际使用的Redux存储。

如果我理解您的问题，那么您正在计划将此组件导入到现有应用程序中，听起来该应用程序已配置为使用（React-）Redux，顶部带有<Provider>。如果真是这样，那么您无需做任何其他特别的事情就可以完成这项工作。只需在您的任何组件中调用React-Redux钩子即可。

通过道具传递react-redux存储和调度功能吗？

1 个答案: