CODEWITHSUNDEEP
javascriptreactjsredux
mrks
mrks

Reputation: 5611

Pass react-redux store and dispatch functions via props?

The following React component is given:

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,
//   };
// }

This is more a theoretical question to see how to actually do the following change:

The component Loader will be imported from another npm package (shared components). My problem is that I have a redux state in the current implementation included (changed it from Class to Functional component, so thats mapping() is still in there).

As I only import the component in my "main" client, I will not have the whole redux setup in place. So I think I need to pass the store and the dispatch functions via props.

So should I create a prop store for my component, where I pass the redux store when I import the shared component?

Do I also create two props for each dispatch functions?

Does is make sense or would there be a better approach?

Upvotes: 0

Views: 465

Answers (1)

markerikson
markerikson

Reputation: 67439

You generally shouldn't import the Redux store directly into components. The hooks allow your component to access whatever Redux store has been injected into the component tree by a <Provider>.

You also don't need to pass dispatch as a prop. Any component can call useDispatch(), and dispatch actions to whatever Redux store is actually being used.

If I understand your question, you're planning on importing this component into an existing app, and it sounds like that app is already configured to use (React-)Redux with a <Provider> at the top. If that's the case, then you don't have to do anything else special to make this work. Just call the React-Redux hooks in any of your components.

Upvotes: 1

Related Questions