как подключиться реагировать с редуксом?

Question

, поэтому я пытаюсь узнать о response-redux с использованием response-native, и я хочу создать страницу, на которой я могу ввести число и нажать «Войти».когда я нажимаю «Войти», страница сообщит мне номер, который я ввел и сохранил в магазине, который я создал с помощью redux.

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

ниже моя тестовая страница

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

class tes extends Component{

    constructor(props){
        super(props)
    }
    render(){
        return(
            <View>
                <TextInput placeholder="phone number"
                    keyboardType="number-pad"/>

                <TouchableOpacity onPress={this.props.onLogin}>
                    <Text>login</Text>
                </TouchableOpacity>
            </View>
        )
    }
}

mapStateToProps = state => {
    return {
        number: state.phoneNumber
    }
}

mapDispatchToProps = dispatch => {
    return {
        onLogin: (number) => {
            dispatch(actions.setLoginNumber(number))
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(tes);

это мой класс магазина

import {createStore} from 'redux';

import reducer from './Reducer';

export default createStore(reducer)

вот мой класс редуктора

 const reducer = (state = {
    phoneNumber: '',
},action) => {
    switch(action.type) {
        case "LOGIN":
            state = {
                phoneNumber: action.payload
            }
            break;
    }
    return state;
}

export default reducer;


{/* and this one my action class */}

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

заранее спасибо ..

Answer 1

Я думаю, что вы не передаете номер параметра в функцию onLogin, и вам понадобится локальная переменная состояния для хранения значения. Код должен быть таким

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

class tes extends Component{

    constructor(props){
        super(props)
        this.state = {
           number: 0,
        };
    }
 render(){
        return(
            <View>
                <TextInput placeholder="phone number"
                    onChangeText={inputNumber => {
                      this.setState({ number: inputNumber })
                    }}
                    keyboardType="number-pad"/>

                <TouchableOpacity onPress={() => {this.props.onLogin(this.state.number) }}>
                    <Text>login</Text>
                </TouchableOpacity>
            </View>
        )
    }
mapStateToProps = state => {
    return {
        number: state.phoneNumber
    }
}

mapDispatchToProps = dispatch => {
    return {
        onLogin: (number) => {
            dispatch(actions.setLoginNumber(number))
        }
    }
}

Ответьте на второй вопрос - Вы не передали созданное хранилище компоненту провайдера Reaction-redux, как показано ниже:

import { Provider } from 'react-redux';
import App from './App';
import store from './store';

export default class Root extends Component {
  constructor() {
    super();
  }
render() {
      return (
        <Provider store={store}>
          <App />
        </Provider>
      );

  }
}

Надеюсь, это поможет.