CODEWITHSUNDEEP
reactjsreduxreact-redux
ishan Vadwala
ishan Vadwala

Reputation: 359

Good practice to pass Action creators to functional components in a react-redux app?

I'm using a tab to render what gets displayed in the modal

I've converted most of my containers to functional components to make them reusable and I'm wondering if it's good practice to pass Action Creators as props to theses functional components.

In this case, I'm using a tab to switch between Login and Sign Up page and I'm using local state to manage active class (for styling). I call action creators passed down as props to switch between rendering a login or sign up page. I'm using this tab in several places and I'm passing a different configuration object as per use cases.

homePageTabProps = {
  firstTabTitle:"blog",
  secondTabTitle:"resume",
  showFirstTab: this.props.showBlogTab,
  showSecondTab: this.props.showResumeTab
}

Is this good practice? yay or nay?

Edit:

The active tab style is giving me problems (retains value when reusing the component). Can I have local & global state? (Sorry if this sounds stupid.)

Upvotes: 2

Views: 810

Answers (1)

fkulikov
fkulikov

Reputation: 3199

Passing functions as a props down the hierarchy of your Components is for sure widely accepted practice. But I would suggest not to pass bare action creators, but bind them to dispatch before passing them to Component. This way, if your child Component is not connected to store it will not have to know about Redux at all (no need to manually dispatch).

As for your complication with two states. There is nothing wrong in mixing own Component's state with part of Redux passed to Component via connect. I would even strongly recommend to keep all temporary data not important to your application logic inside Component's state without exposing it to Redux. For example, most of the time, there is no sense in sending animation timings, intermediate state of user input, etc. to Redux.

But, in your case looks like indication of active tab is a direct reflection of Redux state and should be fetched from store. Otherwise it's not clear why you are sending actions to Redux on tab's change.

Upvotes: 4

Related Questions