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;

Carlotta · Accepted Answer · 2021-08-19 03:31:42Z

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;

edited Aug 19, 2021 at 3:31

Carlotta

3341 silver badge13 bronze badges

answered Aug 18, 2021 at 10:12

ranganathan

462 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Phaki Over a year ago

Can you show me how can you pass dispatch and redux state as an arguments? I tried but it gives me undefined value in the generate function.

ranganathan Over a year ago

Phaki Over a year ago

Not working, return undefined values when i console log dispatch or state. I call it from an other component.

Collectives™ on Stack Overflow

Use redux state in exported function (functional component) React

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related