2016-06-22 7 views
0

Ich lerne gerade reagieren native und wie es mit redux funktioniert. Ich habe ein Geschäft eingerichtet, ein loginContainer, loginView eingerichtet. Diese Ansicht hat eine Schaltfläche, die, wenn sie angeklickt wird, eine Aktion/Reduzierer sendet, um den Text der Schaltfläche zu "angemeldet" zu ändern. Ich hatte gehofft, ich könnte einen Einblick bekommen, warum ich die Logs für die Aktion/den Reducer sehe, aber nichts wird jemals an den loginContainer gesendet, um ihn dann auf dem loginView neu zu rendern. Hierreact-native/Redux gesendet Aktion, send Reducer, aber UI nicht aktualisiert

ist der Code für Loginview:

import { View, Platform, Text, TextInput, TouchableHighlight, Alert, Navigator} from 'react-native'; 
import React, { Component } from 'react'; 
import styles from './styles'; 
import MainView from '../MainView/mainview'; 
import loginReducers from '../../reducers'; 
import { createStore } from 'redux'; 
import * as loginActions from '../../actions/actions'; 
import { LOGIN } from '../../actions/actions'; 
class LoginView extends Component { 
    constructor(props) 
    { 
     super(props); 
    } 

    render() { 
     const {text, _loginPressed} = this.props; 
     return (
      <View style={styles.container}> 
      <TextInput style={styles.textInput} placeholder={"Username.."}/> 
      <TextInput style={styles.textInput} placeholder={"Password.."}/> 
      <TouchableHighlight onPress={_loginPressed} style={styles.loginButton} underlayColor={'#2f9bd7'}> 
      <Text style={styles.loginButtonText}>{text}</Text> 
      </TouchableHighlight> 
      </View> 
     ); 
    } 
} 
export default LoginView; 

Anmeldung Container:

import { View, Platform, Text, TextInput, TouchableHighlight, Alert, Navigator} from 'react-native'; 
import React, { Component } from 'react'; 
import { createStore } from 'redux'; 
import { StyleSheet } from 'react-native'; 
import styles from './styles'; 
import loginReducers from '../../reducers'; 
import {LOGIN} from '../../actions/actions' 
import LoginView from '../../components/Login/loginview'; 
import { connect } from 'react-redux'; 
import {bindActionCreators} from 'redux'; 

export default class LoginContainer extends Component { 
    constructor(props) { 
    super(props); 
    } 

    render() { 
    const {text} = this.props; 
    console.log(this.state); 
    return (
     <LoginView 
     text={text} 
     _loginPressed={this._loginPressed.bind(this)}/> 
    ); 
    } 
} 

const stateToProps = (state) => { 
    return { 
    state: this.state 
    } 
} 

const dispatchToProps = (dispatch) => { 
    return { 
    _loginPressed:() => { 
     dispatch(LOGIN())} 
    }; 
}; 

export default connect(stateToProps, dispatchToProps)(LoginView) 

Draufsicht (setup.js):

import App from './components/App'; 
import React, { Component } from 'react'; 
import { Provider } from 'react-redux'; 
import configureStore from './store'; 

const store = configureStore(); 

function setup() { 
    class Root extends Component { 
    render() { 
     return (
     <Provider store={store}> 
      <App/> 
     </Provider> 
    ); 
    } 
    } 

    return Root; 
} 

module.exports = setup; 

App/index.js

import { View, Platform, Text, TextInput, TouchableHighlight, Alert, Navigator} from 'react-native'; 
import React, { Component } from 'react'; 
import styles from './styles'; 
import LoginContainer from '../../containers/Login/loginContainer'; 
import configureStore from '../../store'; 

class App extends Component { 
    render() { 
    return (
     <Navigator 
     initialRoute={{name: 'LoginView', component: LoginContainer}} 
      renderScene={(route, navigator) => { 
      //creates new element with the component and navigator;] 
      if (route.component) { 
       return React.createElement(route.component, Object.assign({navigator }, {type: 'LoginView', text: 'Login'})); 
       } 
      }} 
     /> 
    ); 
    } 
} 

export default App; 
+0

könnten Sie Ihre App-Komponente zu – diedu

+0

@diedu I adde auch posten d das in – Rockyfish

Antwort

0

versuchen

const stateToProps = (state) => { 
    return { 
    state: state 
    } 
} 

denke ich this in diesem Zusammenhang

UPDATE

LoginContainer seit verwirrender ist Art, die Sie exportieren zwei Komponenten nicht definiert ist: LoginContainer und verbunden Loginview, versuchen Sie dies ändert:

import { View, Platform, Text, TextInput, TouchableHighlight, Alert, Navigator} from 'react-native'; 
import React, { Component } from 'react'; 
import { createStore } from 'redux'; 
import { StyleSheet } from 'react-native'; 
import styles from './styles'; 
import loginReducers from '../../reducers'; 
import {LOGIN} from '../../actions/actions' 
import LoginView from '../../components/Login/loginview'; 
import { connect } from 'react-redux'; 
import {bindActionCreators} from 'redux'; 

class LoginContainer extends Component { 
    constructor(props) { 
    super(props); 
    } 

    render() { 
    const {text} = this.props; 
    console.log(this.state); 
    return (
     <LoginView 
     text={text} 
     _loginPressed={this.props._loginPressed}/> 
    ); 
    } 
} 

const stateToProps = (state) => { 
    return { 
    state: state 
    } 
} 

const dispatchToProps = (dispatch) => { 
    return { 
    _loginPressed:() => { 
     dispatch(LOGIN())} 
    }; 
}; 

export default connect(stateToProps, dispatchToProps)(LoginContainer) 
+0

Das hat nicht funktioniert :( – Rockyfish

Verwandte Themen