状態のReactとReduxの伝搬の変化

Question

簡単な質問：2つのコンポーネントと2つの減速器があります。基本的に2つに分割されたアプリケーションの状態は、{stateComponent1: object, stateComponent2: object ....}.Component2のようなものになります。さらに、stateComponent1とstateComponent2を割り当てたMapStateToProps関数によって行われます（ "自分の"）。

質問はComponent1を変更するstateComponent1の原因となる派遣を行う際に、その小道具stateComponent1であるため、Component2は、再レンダリングする必要があります、ありますか？要は、これは起こらないということです。

EDIT：

行動

export const actionCreators = { 
    requestLogin: (credentials: Credentials): AppThunkAction<KnownAction> => (dispatch, getState) => { 
     dispatch({ 
      type: 'LOGIN_REQUEST', 
      isFetching: true, 
      isAuthenticated: false, 
      credentials: credentials 
     }); 
     const config = { 
      method: 'POST', 
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, 
      body: `username=${credentials.username}&password=${credentials.password}` 
     }; 
     const loginTask = fetch(`http://localhost:50679/api/jwt`, config).then(response => response.json()).then((data) => { 
      if (!data.idToken) { 
       dispatch({ 
        type: 'LOGIN_FAILURE', 
        isFetching: false, 
        isAuthenticated: false, 
        message: 'Error en el login' 
       }); 
       return Promise.reject(data); 
      } else { 
       // If login was successful, set the token in local storage 
       if (typeof localStorage !== 'undefined') { 
        localStorage.setItem('idToken', data.idToken); 
       } 
       // Dispatch the success action 
       dispatch({ 
        type: 'LOGIN_SUCCESS', 
        isFetching: false, 
        isAuthenticated: true, 
        idToken: data.idToken 
       }); 
      } 
     }); 
    }, 

レデューサー：

export const reducer: Reducer<LoginState> = (state: LoginState, action: KnownAction) => { 
    switch (action.type) { 
    case 'LOGIN_REQUEST': 
     return { 
      isFetching: true, 
      isAuthenticated: false, 
      idToken: '', 
      credentials: action.credentials, 
      message: '' 
     }; 
    case 'LOGIN_SUCCESS': 
     return { 
      isFetching: false, 
      isAuthenticated: true, 
      idToken: action.idToken, 
      credentials: null, 
      message: '' 
     }; 
    case 'LOGIN_FAILURE': 
     return { 
      isFetching: false, 
      isAuthenticated: false, 
      idToken: '', 
      credentials: null, 
      message: action.message 
     }; 
    case 'LOGOUT_SUCCESS': 
     return { 
      isFetching: true, 
      isAuthenticated: false, 
      idToken: '', 
      credentials: null, 
      message: '' 
     }; 
    default: 
     // The following line guarantees that every action in the KnownAction union has been covered by a case above 
     const exhaustiveCheck: any = action; 
    } 

    return state || unloadedState; 
}; 

今、私は基本的にこれは、私がログインを行う店舗を持っているあなたに私のコード

を表示私は、ログイン状態に加入しているコンポーネントを持っています。このコンポーネントは、この状態が変化したときに「検出」する必要があります例えば、S、すなわち、ログインが行われたときに、私はこれを行う：

return connect(
    (state: ApplicationState) => 
    Object.assign(state.login, state.location, state.history) 
)(AuthenticatedComponent); 

問題はstate.loginが変更されたときに、私のAuthenticationComponentコンポーネントがわからないということです。

Answer 1

shouldComponentUpdateを上書きする必要があります。

shouldComponentUpdate(nextProps) { 
    if (nextProps.stateComponent1 !== this.props.stateComponent1) { 
    return false; 
    } 
    return true; 
}