Should I use states from redux (connect) in my component or pass down props from the parent component?

Admin 1
Viewed 148

Obviously I'm no longer using local state as my state is now contained in a Redux container.

But for stateless components I simply pass down data they need using props.

I wanted to verify that this is O.K.?

Below is an example of a stateless component that receives data from it's parent and passes data down to it's child.

The parent element is using Redux. ( Not shown ).

Is there a good reference for this some where? i.e. documentation?

import React from 'react';
import FrameFaveTagFave from './FrameFaveTagFave.jsx';

const FrameFaveTag = function(props) {
  const bookmarks = props.bookmarks.map((bookmark) =>
    <FrameFaveTagFave bookmark={bookmark} key={bookmark.id} />
  );
  return (
    <div className="bookmark_page" id="{props.tag}" >
      <div className="bookmark_tag_title">
        <p className="bookmark_tag_title_p">
          {props.tag}
        </p>
      </div>
      {bookmarks}
    </div>
  )
}

export default FrameFaveTag;
redux reactjs javascript
1 Answers

That depends upon the convention you're following. Whenever I'm making an app, I like to keep the states in redux which are relevant to multiple part of an app. Suppose you're fetching the data when your app mounts for the user account's information, permissions information etc., I'd prefer those to put in my redux state which I can access anywhere in the app. But suppose a state in only meaningful to a component, I'd like to put that in the component's state. An example can be where you're opening/closing a modal or a third pane etc. You can put that in redux state too but it does make sense to put that in React component's state. If you want to make everything a functional component in your app, you might as well want to look at recompose and it's utility methods. This answer from the redux author will give you more insights about when you should definitely store states in redux in your app.

EDIT:

If there is a comparison between whether we should use connect in a component or pass the props from parent then I'll tend to use passing from parent a little better over connect because although connect makes a component only listen to relevant state change for the component and then re-renders yet it has to make comparison checks whether the state relevant to that component has changed or not.

user_26482160
Related