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

【问题标题】：Pass react-redux store and dispatch functions via props?通过 props 传递 react-redux 存储和调度功能？
【发布时间】：2020-10-12 13:13:21
【问题描述】：

给出以下 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 设置。所以我想我需要通过props 传递store 和dispatch 函数。

那么我应该为我的组件创建一个 prop store，当我导入共享组件时，我会在其中传递 redux 存储区吗？

我是否还要为每个调度函数创建两个道具？

这有意义还是有更好的方法？

【问题讨论】：

所以你的 Loader 组件是在期望 redux 可用的情况下构建的？为什么不将 Loader 组件更改为接受 onBgChange 回调，这样它就不需要总是嵌套在 redux 应用程序中。
Loader 仅在它是 react-redux 提供者的子级时才能工作。

标签： javascript reactjs redux

【解决方案1】：

您通常不应该将 Redux 存储直接导入到组件中。这些钩子允许你的组件访问任何通过 <Provider> 注入到组件树中的 Redux 存储。

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

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

【讨论】：