Use redux state in exported function (functional component) React

Question

I would like to generate an array from my existing redux state with exported function in functional component. I want to use my useSelector data and dispatch function in my exported function. I only need the generate function that I can call from outside, but for using redux state, I have to create a functional component too.

To show you my problem, here is my code:

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 and dispatch cannot access outside component function. Instead, we can pass dispatch and redux state as arguments.

Add dispatch to the props of the function and then add it as well when ever you call the function.

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;