2017-05-31 1 views
0

Eine einfache Frage: Ich habe zwei Komponenten, mit zwei Reduzierungen. Der Zustand der Anwendung, im Wesentlichen in zwei Teile geteilt, wäre etwas wie {stateComponent1: object, stateComponent2: object ....}.Component2, zusätzlich "verwendet" den Zustand der ersten Komponente, dies wird durch die MapStateToProps Funktion getan, in der wir die stateComponent1 und die stateComponent2 zuweisen (die " besitzen").React & Redux Ausbreitung ändert sich im Zustand

Die Frage ist, wenn Component1 eine Dispatch führt die stateComponent1 ändern verursacht, sollte Component2 neu gerendert werden, da er in seinen Requisiten hat die stateComponent1? Der Punkt ist, dass dies nicht passiert. Jetzt

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; 
}; 

:

EDIT: Ich zeige Ihnen meinen Code

Ich habe ein Geschäft, das die Login funktioniert, im Grunde ist dies:

AKTIONEN

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 
       }); 
      } 
     }); 
    }, 

REDUCERS Ich habe eine Komponente, die den Anmeldestatus abonniert, der "herausfinden" muss, wenn sich dieser Status ändert s, das heißt zum Beispiel, wenn Anmeldung gemacht wird, ich dies tun:

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

Das Problem ist, dass meine AuthenticationComponent Komponente nicht wissen, wann die state.login verändert hat.

+1

Ich bin mir nicht sicher, ob ich verstehe - wenn Komponente 2 'stateComponent1' verwendet, dann macht es Sinn, dass Komponente 2 neu rendern sollte, wenn sich das Segment des Zustands ändert? –

+0

Nun, sagen wir, das Status-Segment von Komponente1 ist Teil der Requisiten von Komponente 2, also verstehe ich, dass, wenn es sich ändert (über eine Komponente 1 Versand), Komponente 2 neu gerendert werden sollte, oder? Zumindest dachte ich: –

+0

Könnten Sie den Code Ihres Reducers teilen? – Faris

Antwort

0

Sie sollten sollteComponentUpdate überschreiben.

+0

Diese Option scheint logisch, aber sollte es nicht automatisch tun? Ich würde gerne verstehen, warum, wenn die Stütze einer Komponente sich ändert, die Komponente wieder gerendert wird, aber es funktioniert nicht dasselbe, wenn diese Stütze das Segment des Zustands ist, der ihr durch die Verbindung zugewiesen wurde() Funktion von Redux –

+0

Vielleicht ist der Reducer nicht korrekt Zustand mutieren. Normalerweise sollte der Reduzierer '{... state, segment: {... state.segment, mod: 'xyz'}}' zurückgeben, statt 'state.segment.mod = 'xyz''. Dies gilt insbesondere, wenn verschachtelte Objekte beteiligt sind. – vijayst

Verwandte Themen