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;
könnten Sie Ihre App-Komponente zu – diedu
@diedu I adde auch posten d das in – Rockyfish