在导出函数（功能组件）React 中使用 redux state

Question

我想从我现有的 redux 状态生成一个数组，并在功能组件中导出函数。我想在我的导出函数中使用我的 useSelector 数据和调度函数。我只需要可以从外部调用的生成函数，但是为了使用 redux 状态，我也必须创建一个功能组件。

为了向您展示我的问题，这是我的代码：

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { treeActions } from "../store/treedata-slice";

function GenerateTree() {
  const dispatch = useDispatch();
  const pathways = useSelector((state) => state.tree.pathways);
  const pickedRenderElementType = useSelector(
    (state) => state.tree.pickedRenderElementType
  );
  const pickedRenderElementValue = useSelector(
    (state) => state.tree.pickedRenderElementValue
  );
  const scenarios = useSelector((state) => state.tree.scenarios);
  const treeData = useSelector((state) => state.tree.treeData);
  
  return <div></div>;
}

export const generate = () => {
  const arr = scenarios;
  if (pickedRenderElementType === "scen") {
    dispatch(treeActions.setTreeData(/* make the tree */));
  }
  if (pickedRenderElementType === "path") {
    dispatch(treeActions.setTreeData(/* make the tree */));
  }
  if (pickedRenderElementType === "act") {
    dispatch(treeActions.setTreeData(/* make the tree */));
  }
};
export default GenerateTree;

Answer 1

useSelector 和 dispatch 无法访问外部组件功能。相反，我们可以传递 dispatch 和 redux state 作为参数。

将 dispatch 添加到函数的 props 中，然后在调用该函数时也添加它。

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { treeActions } from "../store/treedata-slice";

function GenerateTree() {
  const dispatch = useDispatch();
  const pathways = useSelector((state) => state.tree.pathways);

  const pickedRenderElementType = useSelector(
    (state) => state.tree.pickedRenderElementType
  );

  const pickedRenderElementValue = useSelector(
    (state) => state.tree.pickedRenderElementValue
  );

  const scenarios = useSelector((state) => state.tree.scenarios);
  const treeData = useSelector((state) => state.tree.treeData);
  
  return <div></div>;
}

export const generate = (dispatch) => {
  const arr = scenarios;

  if (pickedRenderElementType === "scen") {
    dispatch(treeActions.setTreeData(/* make the tree */));
  }

  if (pickedRenderElementType === "path") {
    dispatch(treeActions.setTreeData(/* make the tree */));
  }

  if (pickedRenderElementType === "act") {
    dispatch(treeActions.setTreeData(/* make the tree */));
  }
};

export default GenerateTree;

在导出函数（功能组件）React 中使用 redux state

Use redux state in exported function (functional component) React

javascript

reactjs

function

redux

export