How do I pass the value to: "this.props" - React Native

Question

I started studying React Native in version 0.55.4, and it seems to have changed a few things in the most current version (0.59.8), now I’m having difficulty passing/assigning values in the this.props.modificaNome, follows an example below of how I do in a TextInput and the error it presents:

Dependencies used:

"dependencies": {
    "firebase": "^5.7.3",
    "react": "16.8.3",
    "react-native": "0.59.8",
    "react-native-router-flux": "^4.0.6",
    "react-redux": "^7.0.3",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0"
  },

I don’t know if this change was in React Native or Redux. But it is presenting the following error:

Example of my code:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import {
	View,
	StyleSheet,
	StatusBar,
	Text,
	TouchableHighlight,
	TextInput
} from 'react-native';
import {
	modificaNome
} from '../reducers/AutenticacaoReducers';


class Confirmar extends Component {

	constructor(props) {
		super(props);
		this.state = {};
	}

	render() {
			return (
				<View style={{ flex: 1, backgroundColor: '#FFF' }}>
					<StatusBar backgroundColor="#104E8B" barStyle="light-content" />
					<View>

						<TextInput
							placeholder=" Digite o seu nome... "
							style={{ fontSize: 15, height: 50 }}
							selectionColor="#696969"
							underlineColorAndroid="#FFFFFF"
							returnKeyType="go"
							multiline={false}
							numberOfLines={1}
							spellCheck={false}
							maxLength={15}
							autoCorrect={false}
							value={this.props.nome}
							onChangeText={texto => this.props.modificaNome(texto)}
						/>

						<TouchableHighlight
							style={Estilos.buttom}
							underlayColor='#CDC9C9'
							accessibilityLabel="Clique aqui para ler o meu convite."
							onPress={() => {}}>
							<Text style={{ color: '#FFF', fontSize: 18, fontWeight: 'bold' }}>OK</Text>
						</TouchableHighlight>

					</View>
				</View>
			)
	}
}


const Estilos = StyleSheet.create({
	buttom: {
		alignItems: 'center',
		justifyContent: 'center',
		borderColor: '#3A5FCD',
		backgroundColor: '#04B45F',
		borderWidth: 0.5,
		borderRadius: 100,
		width: 280,
		height: 40
	},
})

const mapStateProps = state => ({
	nome: state.AutenticacaoReducers.nome,
});

export default connect(mapStateProps, {
	modificaNome,
})(Confirmar);

My Authenticated One and Two:

import {
    MODIFICA_NOME,
} from './../actions/Types';

const INITIAL_STATE = {
    nome: '',
}

export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case MODIFICA_NOME:
            return { ...state, nome: action.payload }
        default:
            return state;
    }
}

My Authenticcaoactions:

import {
  MODIFICA_NOME,
} from './Types';

export const modificaNome = (texto) => {
  return {
    type: MODIFICA_NOME,
    payload: texto
  }
}

Answer 1

By the code you can understand that you are important the function modificaNome and not receiving it by props, hence the message

this.props.modificaNome is not a Function

Therefore, your onChangeText should look like this:

onChangeText={texto => modificaNome(texto)}

In addition, the value of his TextInput must be a variable of the local state:

constructor(props) {
    super(props);
    this.state = {
      nome: ''
    };
}
...
<TextInput
    ...
    value={this.state.nome}
    onChangeText={texto => modificaNome(texto)}
/>

Finally, it is not interesting to fire an action in Redux for each change in the text. A better alternative would be to change the current status with each change of text and have a button to send as soon as the user wishes:

constructor(props) {
    super(props);
    this.state = {
      nome: ''
    };
}
...
<TextInput
    ...
    value={this.state.nome}
    onChangeText={texto => this.setState({ nome: texto})}
/>
<Button
   onPress={() => modificaNome(this.state.nome)}
   title="Modificar nome"
/>

Answer 2

the function connect takes two arguments that are the mapStatetoProps which must be a function and mapDispatchToProps which may be a function or an object see documentation, in your code you are apparently importing the reducers but the right one would matter the actions or do the dispatch of them, in the code you released your actions are in the file AutenticacaoAction.js Mapdispatchtoprops

The provision of a mapDispatchToProps allows you to specify what actions your component will need to dispatch. It allows you to provide functions to dispatch the actions as props

import {
    modificaNome
} from '../reducers/AutenticacaoReducers';// vc ta importando as action ou reducers?

 . . .

export default connect(mapStateProps, {
    modificaNome,
})(Confirmar);

in the mapStatetoProps You should avoid this demented one who’s like this:

const mapStateProps = state => ({
    nome: state.AutenticacaoReducers.nome,
});

try to use something like this

const mapStateProps = state => ({
    nome: state.nome,
});

so that it works or so that you can do the state.nome when you go to combine the reducers you should do something like this

combineReducers({ nome: AutenticacaoReducers });

in documentation they have a good tutorial and the good practices that are used :)