Как использовать редукс в реакции родного

Question

я пытаюсь сделать простое приложение где у меня есть inputText и кнопка, которая при нажатии предупредит значение inputText.

, но мне нужно добавить излишний к этому процессу, где значение inputText будет сохранено первым, а значение хранилища будет предупреждено.

но когда я попробовал, это не сработало для меня .. Я не знаю, что я делаю неправильно. если кто-то может мне помочь, было бы очень приятно ..

вот мои коды:

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

это класс tes, где я создаю страницу:

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

Answer 1

Убедитесь, что вы обновляете текущее состояние следующим образом:

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

А также измените ваш конструктор, включив в него this, и привяжите ваши функции (как предложил Брентон) к this или к функциипопытается найти переменную с именем this

 this.state = {
   phoneNumber: "",
 }
 this.funcAlert = this.funcAlert.bind(this);

Answer 2

Я не попадаю туда, где вы объявили провайдера и привязали магазин к приложению.Также как кто-то, как упомянуто в другом ответе, пожалуйста, проверьте, если вы экспортировали редуктор.

Для справки, вот стартовый проект с реагировать, реагировать на редукцию и thunk.https://github.com/mohitmutha/react-redux-router-thunk-starter

Answer 3

вы экспортируете свой редуктор?

Я заметил, что ваше действие не export default, и ваш импорт не указывает import {setLoginNumber} from '../Redux/Action'.Для работы потребуется один из двух.

если вам довелось изменить функцию mapState на props с

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

на:

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

Это может быть запутанным со словом состояние , но оно получает текущее состояние хранилища, которое в вашем редукторе:

const initialState = { phoneNumber: 0 } 

И наконец bind this до funcAlert.В конструктор можно перейти:

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

или

<TouchableOpacity onPress={this.funcAlert.bind(this)}>