Fórum React Native - Como fazer isso em Redux? #607820

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