javascript - 在导出的函数（功能组件）React 中使用 redux 状态

Question

我想从我现有的 redux 状态生成一个数组，并在功能组件中导出函数。我想在导出的函数中使用我的 useSelector 数据和调度函数。我只需要可以从外部调用的 generate 函数，但是对于使用 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;

标签： javascriptreactjsfunctionreduxexport

Answer 1

useSelector和dispatch不能访问外部组件函数。相反，我们可以将dispatch 和redux 状态作为参数传递。

将 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;