React-Redux容器数据接收：ownProps与Redux Store选用疑问

Great question—this is such a common point of confusion when you’re getting deeper into React-Redux, especially when you’re trying to balance code clarity and performance. Let’s break this down step by step.

First off: Both approaches are valid #

You absolutely can fetch props directly from the Redux store, or use ownProps (the props passed to your container from its parent component) to shape the data you pull from the store. Neither is "better" universally—it all depends on your use case.

When to stick with pure Store-derived props #

Use this approach when your container component needs data that doesn’t depend on any input from its parent. For example:

• A global user profile component that always displays the currently logged-in user’s info, no matter where it’s rendered
• A notification badge that shows the total number of unread messages from the store, with no parent-provided filters

In these cases, your mapStateToProps (or useSelector hook) only needs to reference the Redux state, and you don’t need to touch ownProps at all. Example with connect:

const mapStateToProps = (state) => ({
  currentUser: state.auth.user,
  unreadNotifications: state.notifications.unreadCount
});

const UserProfile = connect(mapStateToProps)(ProfileView);

When you need to use ownProps #

ownProps becomes essential when your container’s required data depends on values passed down from its parent. Here are the most common scenarios:

1. Fetching item-specific data: If you have a list of products, and each child product component needs to fetch its own details from the store using an id passed by the parent.

   // With connect
   const mapStateToProps = (state, ownProps) => ({
     product: state.products.find(p => p.id === ownProps.productId)
   });
   
   const ProductCard = connect(mapStateToProps)(ProductView);
   
   // Parent component usage
   <ProductCard productId="123" />
   

2. Reusable containers: When you want a single container component to render different slices of state based on parent props. For example, a tabbed dashboard where each tab passes a category prop, and the container fetches data for that specific category.
3. Combining local props with global state: When you need to merge parent-provided values with store data. Like showing a "favorite" button that checks if the parent-passed itemId is in the store’s list of user favorites.

Fixing those rendering issues you mentioned #

If you’re seeing unexpected re-renders when using ownProps, it’s almost always related to how your data is being computed. Here’s how to fix it:

• Use memoized selectors: For connect, use the reselect library to create memoized selectors that only recalculate when their dependencies (state or ownProps) change. This prevents unnecessary re-renders from identical data computations.

  import { createSelector } from 'reselect';
  
  const selectProducts = state => state.products;
  const selectProductId = (state, ownProps) => ownProps.productId;
  
  const selectProductById = createSelector(
    [selectProducts, selectProductId],
    (products, productId) => products.find(p => p.id === productId)
  );
  
  const mapStateToProps = (state, ownProps) => ({
    product: selectProductById(state, ownProps)
  });
  

• For function components with useSelector: If you’re using hooks, useSelector can directly access your component’s props (no need for a separate ownProps parameter). Just make sure to either use a memoized selector or pass shallowEqual as the second argument to avoid re-renders from object reference changes.

  import { useSelector, shallowEqual } from 'react-redux';
  
  const ProductCard = ({ productId }) => {
    const product = useSelector(
      state => state.products.find(p => p.id === productId),
      shallowEqual // Only re-render if the product object actually changes
    );
    // ...
  };
  

Balancing performance: Parent vs child logic #

Your goal of handling complex logic in the parent to avoid child duplication is spot-on. Here’s how to align that with ownProps:

1. Let the parent handle heavy computations (like filtering a large list of items, sorting, or transforming data).
2. Pass only the necessary identifiers or simplified parameters to the child container via ownProps.
3. The child container uses those parameters to fetch the exact slice of state it needs from the store.

This way, the parent does the heavy lifting once, and each child just retrieves its specific data without repeating the logic.

Final verdict: Do you need ownProps? #

No, you don’t always need it—but it’s an incredibly useful tool when your container’s data depends on context from its parent. Use it when:

• Your component needs to fetch item-specific data using a parent-provided ID/key
• You want to reuse a container for different slices of state
• You need to combine parent props with global state to determine rendering or behavior

内容的提问来源于stack exchange，提问作者Goor Lavi