Estoy tratando de hacer una aplicación simple donde tengo un inputText, y un botón que alertará el valor de inputText cuando se presiona.

Pero necesito agregar redux a este proceso, donde el valor de inputText se almacenará primero y se alertará al valor de la tienda.

Pero cuando lo intenté, no funcionó para mí ... No sé qué estoy haciendo mal. si alguien me puede ayudar, sería muy agradable ...

Aquí están mis códigos:

Store.js

import { createStore , applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import reducer from './Reducer';
import thunk from 'redux-thunk';

export default function configureStore() {
    let store = createStore(reducer, composeWithDevTools(applyMiddleware(thunk)))

    return store
}

Reducer.js

const initialState = {
    phoneNumber: 0
}

export default function reducer (state = initialState, action) {
    switch(action.type) {
        case "LOGIN":
            return {
                ...state,
                phoneNumber: action.payload
            }
        default :
            return state

    }

}

Action.js

export function setLoginNumber(number) {
    return{
        type: "LOGIN",
        payload: number
    };
}

Esta es la clase tes donde construyo la página:

import React, {Component} from 'react';
import {View, TextInput, TouchableOpacity, Text} from 'react-native';
import {connect} from 'react-redux';
import setLogin from '../Redux/Action';
import reducer from '../Redux/Reducer';

class tes extends Component{
    constructor(props){
        super(props)
        state = {
            phoneNumber: "",
        }
    }

    funcAlert() {
        alert(this.props.number)
    }

    render(){
        return(
            <View>
                <TextInput placeholder="phone number"
                    keyboardType="number-pad" onChangeText={phoneNumber => this.setState({ phoneNumber })}/>
                <TouchableOpacity onPress={this.props.setLoginNumber(this.state.phoneNumber)}>
                    <Text>login</Text>
                </TouchableOpacity>

                <TouchableOpacity onPress={this.funcAlert}>
                    <Text>Alert!</Text>
                </TouchableOpacity>
            </View>
        )}
}

function mapStateToProps(state) {
    return {
        number: state.phoneNumber
    }
}

function mapDispatchToProps (dispatch) {
    return {
        setLoginNumber: (phoneNumber) => {
            dispatch(setLoginNumber(phoneNumber))
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(tes);
0
rondi 14 sep. 2018 a las 05:41

3 respuestas

La mejor respuesta

¿estás exportando tu reductor?

Noté que su acción no es export default y su importación no especifica import {setLoginNumber} from '../Redux/Action'. Necesitará tener uno de los dos para trabajar.

¿cambiaste la función mapState a props de:

function mapStateToProps(state) {
    return { number: state.number } 
} 

Para:

function mapStateToProps(state) { 
    return { number: state.phoneNumber } 
} 

Puede ser confuso con la palabra estado , pero obtiene el estado actual de las tiendas que en su reductor es:

const initialState = { phoneNumber: 0 } 

Y finalmente enlazar esto a funcAlert. En el constructor puedes ir:

this.funcAlert = this.funcAlert.bind(this) 

O

<TouchableOpacity onPress={this.funcAlert.bind(this)}> 
1
Brenton 14 sep. 2018 a las 05:02

Asegúrese de actualizar el estado actual de la siguiente manera:

<TextInput placeholder="phone number"
   keyboardType="number-pad" 
   onChangeText={text => this.setState({ phoneNumber:text })}
/>

Y también cambie su constructor para incluir this y vincule sus funciones (como sugirió Brenton) a this o la función intentará buscar una variable llamada this

 this.state = {
   phoneNumber: "",
 }
 this.funcAlert = this.funcAlert.bind(this);
2
Bill F 14 sep. 2018 a las 03:51

No estoy llegando a donde ha declarado el Proveedor y ha vinculado la tienda a la aplicación. También como alguien como se menciona en otra respuesta, verifique si ha exportado el reductor.

Para su referencia, aquí hay un proyecto inicial con react, react-redux y thunk. https://github.com/mohitmutha/react-redux-router-thunk- iniciador

0
Mohit Mutha 14 sep. 2018 a las 04:31