时间戳

首页 > 解决方案 > 如何连接 react 与 redux？

react-native - 如何连接 react 与 redux？

问题描述

所以我正在尝试使用 react-native 来了解 react-redux，并且我想创建一个页面，我可以在其中输入数字并按登录。当我按下登录时，页面会提醒我输入的数字并保存到我用 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
        };
    }

提前致谢..

标签： react-nativereact-reduxstore

解决方案

我认为您没有将参数编号传递给 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))
        }
    }
}

回答您的第二个问题 - 您尚未将创建的商店传递给 react-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>
      );

  }
}

希望能帮助到你。

推荐阅读