Question

我正在尝试制作一个简单的应用程序我有一个inputText，还有一个按钮，当按下该按钮时，它将提醒inputText的值。

但是我需要在该过程中添加redux，首先将存储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

您要出口减速器吗？

我注意到您的操作不是export default，并且您的导入操作未指定import {setLoginNumber} from '../Redux/Action'。它需要具有两者之一才能工作。

您是不是偶然将mapState更改为props函数：

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

至：

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

它可能会与 state 一词混淆，但是它会得到减速器中当前的存储状态：

const initialState = { phoneNumber: 0 }

最后绑定此到funcAlert。在构造函数中，您可以执行以下操作：

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

或

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

Answer 3

我没有到达您声明提供者并将商店绑定到应用程序的位置。另外，作为另一个答复中提到的人，请检查您是否已输出减速器。

作为参考，这是一个带有react，react-redux和thunk的入门项目。 https://github.com/mohitmutha/react-redux-router-thunk-starter

如何在React Native中使用Redux

3 个答案: