移除未使用的mapStateToProps后routes.js功能异常排查

Hey Ray, let's unpack exactly what's going on here—this is a common gotcha with Redux's connect function that trips up a lot of developers.

The Core Issue: connect Does More Than Just Map State to Props #

You're right that mapStateToProps is for reading state into component props, but the connect HOC (Higher-Order Component) does two critical things you might not have accounted for:

• It subscribes your component to Redux store changes. When the store updates, connected components automatically re-render with the latest state.
• It integrates your component with the store's lifecycle, ensuring dispatch actions trigger proper state sync and component updates.

When you removed those connect and mapStateToProps calls, your Routes component lost this subscription. It no longer "listens" for store updates, so even if you dispatch actions to update the token or user data, the component never re-renders to reflect those changes.

Let's Break Down Your Specific Problems #

1. Login keyboard won't dismiss
   Chances are, your keyboard-dismissal logic relies on a state change (like the token being set, which triggers a route navigation or UI update). With connect, the Routes component would re-render when the token updates, triggering that dismissal logic. Without the subscription, the component stays stuck in its pre-login state, so the keyboard never gets the signal to close.

2. Home page fails to fetch data
   Your Home component's componentDidMount runs once when it mounts. If Routes isn't connected, it doesn't re-render when the token is updated post-login. That means Home mounts while the token is still null, and since componentDidMount never runs again, it never gets a chance to fetch data with the valid token. When Routes was connected, the token update would trigger a re-render, which could re-mount or update Home with the new token.

3. Username doesn't load in sidebar drawer
   The sidebar drawer depends on Redux-stored user data. Since Routes isn't subscribed to the store, it never picks up the updated user info after login. The drawer receives stale props and never updates to show the username.

Why mapStateToProps Seemed to Affect Dispatch Timing #

It's not actually mapStateToProps itself affecting dispatch—it's the subscription that connect adds. When your component is connected, after you dispatch an action to update the token, the store notifies the component of the change, triggering a re-render with the new token. Without that subscription, your component has no idea the token was updated, so it keeps using the old null value even though the store itself has the new token.

Fixes to Try #

• Keep connect but optimize it: If you don't need the state mapped in mapStateToProps, you can pass an empty function to connect—this still keeps the store subscription intact, so your component will re-render on store updates. Example:

  export default connect(() => ({}))(Routes);
  

• Manual store subscription (for class components): If you want to avoid connect, you can manually subscribe to the store in your Routes component:

  componentDidMount() {
    this.unsubscribe = store.subscribe(() => {
      // Force re-render to get latest store state
      this.forceUpdate();
      // Or update local state with new values from the store
      const token = store.getState().auth.token;
      this.setState({ token });
    });
  }
  
  componentWillUnmount() {
    this.unsubscribe();
  }
  

• Switch to hooks (if you can refactor to function components): Use useSelector to get state and useDispatch for actions—these hooks handle store subscription automatically without needing connect.

内容的提问来源于stack exchange，提问作者Ray Jonathan