React Native - Como fazer isso em Redux?
Oi pessooal, estou aprendendo React Native e queria saber como passar esse estado para o redux
Estou bastante confuso com tudo isso...
import React, from 'react'; import {Platform, StyleSheet, View, ScrollView} from 'react-native'; import {Icon, Text} from 'react-native-elements'; import Voice from 'react-native-voice'; import Button from '../components/Button'; import Phrases from '../components/Phrases'; import ChamadaGCP from '../services/ChamaGCP'; import Itens from '../components/Itens'; import LinhaTopo from '../components/Registro'; import { createAppContainer } from 'react-navigation'; import { createStackNavigator } from 'react-navigation-stack'; import { Provider, connect } from 'react-redux'; import { Store } from '../store/index.js'; type Props = {}; class NativeSpeechToText extends Component { static navigationOptions = { title: 'GlucoGear - Speech2Txt', headerStyle: { backgroundColor: '#05668D', }, headerTintColor: '#fff', headerTitleStyle: { fontWeight: 'bold', }, }; constructor(props) { super(props); this.state = { textoStatus: '', texto: '', allPhrases: [], id: 0, btnIniDisabled: false, btnParDisabled: true, btnIniColor: '#2F4858', btnParColor: '#db0000', //btnParColor: '#33658A', itens: [], }; Voice.onSpeechStart = this.onSpeechStartHandler.bind(this); Voice.onSpeechEnd = this.onSpeechEndHandler.bind(this); Voice.onSpeechResults = this.onSpeechResultsHandler.bind(this); } onSpeechResultsHandler(result) { if (Array.isArray(result.value)) { let text = ''; text = result.value[0]; this.state.allPhrases.push({ text: text, id: `${this.state.id}`, }); this.state.id++; //Função é chamada var chamada = new ChamadaGCP(); let resposta; (async () => { resposta = await chamada.ChamadaGCP_F(this.state.text); this.setState({ ...this.state, itens: resposta, }); this.props.navigation.navigate('Results', {state: this.state}) })(); console.log("NativeSpeechToText"); //--- // this.setState({ // ...this.state, // texto: result.value[0], // allPhrases: this.state.allPhrases, // } // ); } } onSpeechStartHandler() { this.setState({ ...this.state, textoStatus: 'Diga alguma coisa', }); } onSpeechEndHandler() { this.setState({ ...this.state, textoStatus: 'Parado', }); } onStartButtonPress(e) { this.setState({ ...this.state, btnIniDisabled: true, btnParDisabled: false, btnIniColor: '#33658A', btnParColor: '#db0000', textoStatus: 'Diga alguma coisa', }); Voice.start('pt-BR'); } onStopButtonPress(e) { this.setState({ ...this.state, btnIniDisabled: false, btnParDisabled: true, btnIniColor: '#2F4858', btnParColor: '#db0000', textoStatus: 'Parado', }); Voice.stop(); } render() { const { newValue } = this.props; return ( <View style={styles.container}> <Provider store= /> <LinhaTopo /> <View style={styles.btnWrapper}> <Text h4 style={styles.h4}>Clique no ícone abaixo e diga o que irá comer neste momento, conforme o exemplo e aguarde.</Text> <Text style={styles.text}>Exemplo: "Quatro colheres de sopa de arroz, uma concha de feijão, 70g de peito de frango e 3 folhas de alface."</Text> <Icon reverse name='speaker-phone' //type='font-awesome' size= //txt="INICIAR" onPress={() => this.onStartButtonPress()} disabled={this.state.btnIniDisabled} color={this.state.btnIniColor} containerStyle={styles.Icon} /> <Icon reverse name="stop" size= onPress={() => this.onStopButtonPress()} disabled={this.state.btnParDisabled} color={this.state.btnParColor} containerStyle={styles.Icon} /> <Text style={{textAlign:'center', fontStyle:'italic'}} onPress={() =>{console.log("Consegui")}}> Ou clique aqui para buscar por alimentos manualmente </Text> </View> </View> // <Button // txt="PARAR" // callback={() => this.onStopButtonPress()} // disabled={this.state.btnParDisabled} // color={this.state.btnParColor} // /> // <Text style={styles.text}>Status: {this.state.textoStatus}</Text> // <Text style={styles.text}>{this.state.texto}</Text> // <Phrases // data={this.state.allPhrases} // navigation={this.props.navigation} // /> // <Itens // data={this.state.itens} // navigation={this.props.navigation} // /> ); } } const mapStateToProps = store => ({ newValue: store.clickState.newValue }); const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#EBF2FA', }, btnWrapper: { flexDirection:'column', margin: 5, }, h4: { padding: 3, fontSize: 25, alignSelf: 'flex-start', fontFamily: 'Helvetica', color: '#000', textAlign: "justify", letterSpacing: -1, }, Icon: { alignSelf: 'center', //top: normalize(30) }, text: { padding: 20, fontSize: 15, textAlign:'center', //top: normalize(-10) }, btn: { flex: 1, margin: 10, borderRadius: 3, backgroundColor: '#427AA1', }, btnTxt: { padding: 10, fontSize: 20, fontFamily: 'Helvetica', textAlign: 'center', color: '#DDD', }, }); export default connect(mapStateToProps)(NativeSpeechToText);
Estou bastante confuso com tudo isso...
Carlos Lopes
Curtidas 0