React native 反应本机建议-在按下调度操作时触发Redux操作

我不熟悉在React本机应用程序中使用Redux。我需要一些建议，当用户按下应用程序中的按钮时，我如何启动我的redux操作

我有一个登录屏幕，用户可以在其中输入用户名和密码，按下按钮时会触发

fetchData

Redux操作。

fetchData

操作使用Redux Saga发出API请求以使用户有效，如果有效，将返回“auth_令牌”

我想要实现的是，如果返回了身份验证令牌，用户将被重定向到我的

onPress

函数中的另一个屏幕

这是我到目前为止的代码

登录屏幕

import PropTypes from 'prop-types';
import React, { Component} from 'react';
import { Container } from '../components/Container';
import { StatusBar, Text, TextInput, Button } from 'react-native';
import { setItem } from '../storage/sensitive'
import { connectAlert } from "../components/Alert";
import { connect } from "react-redux";
import { fetchData } from "../redux/actions/userLogin";

class SignIn extends Component {
    static propTypes = {
        navigation: PropTypes.object,
        dispatch: PropTypes.func,
        authToken: PropTypes.string,
        //appData: PropTypes.object
    };

    state = {
        username: '',
        password: '',
        error: '',
        appData: {}
    }

    componentWillMount() {

    }

    onPressSignIn = () => {
        // Check if the username and password fields are entered.
        if (this.state.username === '' || this.state.password === '') {
            this.setState({error: 'Please ensure you have entered a username and password '});
        }
        else {
            // Remove error message if one was rendered previously.
            this.setState({error: ''})

            // Send user credentials to loginUser function to retrieve Authentication Token.
            this.props.dispatch(fetchData(this.state.username, this.state.password));

            // HOW?: Output 'this.props.appData.data.user.auth_token' to determine whether the user is valid
            //        If valid redirect to another screen.
        }

    };

    render() {
         let test = this.props.appData;
         console.log('Get Auth Token', test.data.user ? test.data.user.auth_token : 'no token');
        return (
            <Container>
                <StatusBar barStyle="default" />
                <Text>Sign In</Text>
                <TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}}
                           placeholder="Username"
                           value={this.state.username}
                           email-address={true}
                           onChangeText={username => this.setState({username})} />
                <TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}}
                           placeholder="Password"
                           value={this.state.password}
                           onChangeText={password => this.setState({password})}
                           secureTextEntry={true} />
                <Button onPress={this.onPressSignIn} title="Sign In" color="#841584" accessibilityLabel="Sign in to your account" />
                {this.state.error &&
                    <TextInput value={this.state.error} />
                }
                {this.state.appData.isFetching && <TextInput value='Loading' />}
            </Container>
        );
    }
}

const mapStateToProps = (state) =>  {
    console.log('mapStateToProps', state);
    return {
        appData: state.userLoginReducer
    }
}

export default connect(mapStateToProps)(connectAlert(SignIn));

我注意到，当用户按下

onPressSignIn

函数时，“身份验证令牌”永远不会返回。但是，它会在render（）区域内返回

---

我是否需要进行检查以确定此时用户是否成功登录？只有在这里，我才能从我的Redux操作类型中获得成功响应。

我不太熟悉

Redux saga

，但如果我的获取请求返回承诺或没有，我会告诉你我会怎么做。如果fetch请求返回一个

Promise

，它看起来像这样（请记住，我通常使用

bindActionCreators

方法将分派映射到props）：

否则，我只需使用

componentdiddupdate

：

componentDidUpdate() {
  // At this point your props are up to date as this lifecycle method
  // is called every time your component receives new props
  const test = this.props.appData;
  if (test.data.user.auth_token) redirectTo('/anotherScreen');
}

---

在这种情况下，您的

onPressSignIn

不会改变。

这看起来是非常优雅的解决方案，满足了我的需要。你认为我使用Redux过度设计了我的解决方案吗？我质疑我使用它是否只是因为它似乎是国家管理的推荐方法。我不知道你的应用程序作为一个整体，所以我不能给你一个直接的答案。我建议直接从文档中阅读一些文章（这里是一个有用的链接）。这一切都取决于你的应用程序的规模，以及你在州管理、道具钻探、州提升等方面面临的问题……如果你认为这个答案令人满意，请将其标记为正确=D

 onPressSignIn = () => {
   if (this.state.username === '' || this.state.password === '') {
     this.setState({error: 'Please ensure you have entered a username and password '});
   } else {
     this.setState({error: ''})

     fetchData(this.state.username, this.state.password)
       .then(res => {
         // Here you can have all kinds of logic to decide if
         // redirect should occur or not
         if (res.isUserAuthenticated) redirectTo('/anotherScreen');
       });
 };

componentDidUpdate() {
  // At this point your props are up to date as this lifecycle method
  // is called every time your component receives new props
  const test = this.props.appData;
  if (test.data.user.auth_token) redirectTo('/anotherScreen');
}