2017-09-13 1 views
1

Ich mag Redux in meiner Registrierungsseite verwenden, so habe ich einen Benutzerminderer:Redux mapStateToProps Anschluss nicht richtig

const user = (state = initialState, action) => { 
    switch (action.type) { 
     case 'TYPE_FIRSTNAME': 
      console.log('typed first name ' + action.text); 
      return { ...state, firstName: action.text }; 
     case 'TYPE_LASTNAME': 
      return { ...state, lastName: action.text }; 
     case 'TYPE_EMAIL': 
      return { ...state, email: action.text }; 
     case 'TYPE_PASSWORD': 
      return { ...state, password: action.text }; 
     default: 
      return state; 
    } 
} 

es wie folgt erstellt:

const AppReducer = combineReducers({ 
     nav, 
     user 
    }); 
export default AppReducer; 

der nav Minderer ist für die Navigation (verwendet mit react-navigation und es funktioniert gut). Danach habe ich einen Container erstellt:

const mapStateToProps = state => { 
    return { 
     firstName: state.firstName, 
     lastName: state.lastName, 
    } 
}; 
const mapDispatchToProps = (dispatch, ownProps) => ({ 
    typeFirstName: (text) => {console.log('typed firstname'); 
    dispatch({type: 'TYPE_FIRSTNAME', text})}, 
    typeLastName: (text) => dispatch({type: 'TYPE_LASTNAME', text}), 
    registerUser:() => { 
     //register("mamad"); 
     console.log('called register user : ');   
     dispatch({type: 'MAINSCREEN'}) 
    } 
}); 

export default connect(mapStateToProps, 
    mapDispatchToProps)(RegisterScene) 

Aber es wird nie aufgerufen, warum?

+0

Sie sagen, dass wenn Sie einen Debugger auf die 'return {' Zeile in 'mapStateToProps' setzen, dass es nie getroffen wird? –

+0

Was wird nie genannt? Wenn Sie einen der Ersteller der Aktion wie 'typeFirstName' aufrufen, zeigen Sie uns bitte diesen Code –

+0

können Sie Ihren Code zu codesandbox.io hinzufügen – Deano

Antwort

2

Das einzige Problem, das ich gefunden ist mapStateToProps. Ich denke, es sollte

sein
const mapStateToProps = state => { 
    return { 
     firstName: state.user.firstName, 
     lastName: state.user.lastName, 
    } 
}; 

Es wäre hilfreich, wenn Sie das Fehlerprotokoll hier setzen.

2

Wenn Sie Reduzierer kombinieren, wird der Status in den angegebenen Statuszweig gesetzt.

In Ihrem Fall benötigen Sie state.user.

so sollten Sie Ihre mapStateToProps Funktion wie so aussehen:

const mapStateToProps = state => { 
    return { 
     firstName: state.user.firstName, 
     lastName: state.user.lastName, 
    } 
}; 
+0

vielen Dank, es klappt jetzt :) – Mamadou

Verwandte Themen