通过 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 钩子即可。