Props默认值的最佳设置方法及defaultProps、reducer、selector多位置设置的合理性分析

Hey there! Let's tackle your two questions about React props default values and Redux state handling.

The best approach varies a bit based on whether you're using functional or class components, but here are the most recommended patterns:

• Functional Components (Preferred)
  Use ES6 default parameters directly in the component's props definition. This is the most intuitive method—it aligns with standard JavaScript function behavior, and works seamlessly with type systems like TypeScript. Example:

  function UserCard({ name = "Guest", age = 18 }) {
    return (
      <div>
        <p>Name: {name}</p>
        <p>Age: {age}</p>
      </div>
    );
  }
  

  For TypeScript, pair optional props with default values to maintain type safety:

  interface UserCardProps {
    name?: string;
    age?: number;
  }
  
  function UserCard({ name = "Guest", age = 18 }: UserCardProps) {
    return (
      <div>
        <p>Name: {name}</p>
        <p>Age: {age}</p>
      </div>
    );
  }
  

  While functional components technically support defaultProps, it’s less recommended now—ES6 default parameters are cleaner and avoid some TypeScript type inference quirks.

• Class Components
  Use the static defaultProps property, which is the standard, widely accepted pattern for class-based React components:

  class UserCard extends React.Component {
    static defaultProps = {
      name: "Guest",
      age: 18
    };
  
    render() {
      const { name, age } = this.props;
      return (
        <div>
          <p>Name: {name}</p>
          <p>Age: {age}</p>
        </div>
      );
    }
  }
  

You don’t need to set defaults in all three places. The most reliable and efficient spot is the reducer’s initial state—here’s why each layer matters:

• Reducer Initial State (The Source of Truth)
  This is where your app’s state originates. Setting defaults here guarantees that your state always has valid, fallback values, even if no actions have been dispatched to modify it yet. Example:

  const initialUserState = {
    userName: "Guest",
    userAge: 18
  };
  
  function userReducer(state = initialUserState, action) {
    switch (action.type) {
      case "UPDATE_USER":
        return { ...state, ...action.payload };
      default:
        return state;
    }
  }
  

  By setting defaults here, you eliminate the risk of undefined values propagating through your entire data flow.

• Selector
  If your selector is just extracting data directly from the store state, you don’t need to add defaults here. The reducer’s initial state already ensures the data exists. The only exception is if your selector performs complex transformations that could result in undefined—but even then, it’s better to handle that edge case in the selector rather than duplicating defaults.

• defaultProps
  If your component’s props are exclusively coming from the selector (via connect or useSelector), you don’t need defaultProps either. The selector will always pass in values from the store, which already have defaults set in the reducer. The only time you’d need defaultProps here is if the component might be used independently (without store injection)—but if it’s tightly coupled to your Redux store, this isn’t necessary.

Quick Summary #

Set defaults once in the reducer’s initial state. This keeps your code DRY, avoids inconsistent fallback values across different layers, and ensures every part of your app that uses this state has access to valid data.

内容的提问来源于stack exchange，提问作者Keval Bhogayata