通过 props 传递 react-redux 存储和调度功能？

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>.您也不需要dispatch作为道具传递。任何组件都可以调用useDispatch()，并将操作分派到实际使用的任何 Redux 存储。如果我理解您的问题，您计划将此组件导入现有应用程序，听起来该应用程序已配置为使用 (React-)Redux，<Provider>顶部带有 a。如果是这种情况，那么您不必做任何其他特别的事情来完成这项工作。只需在您的任何组件中调用 React-Redux 钩子即可。