Question

我正在使用redux创建一个应用程序。所以我创建了一个商店。商店也使用redux-thunk。然后，我还拥有化简器，该化简器可以控制化简器的状态和动作。

现在，我有一个名为doAuth.js的操作，我只想对用户进行身份验证。但是我无法从我的Login.js容器中传递电子邮件和密码。

这是我到目前为止所做的：

在我的Login.js中，我添加了以下两个函数并连接了要存储的组件：

const mapStateToProps = (state) => {
    return {
        authentication: state.authentication
    }
}

const mapDispatchToProps = (dispatch) => ({
    doAuth: (email, password) => dispatch(doAuth(email, password))
})

export default connect(mapStateToProps, null)(Login);

我正在通过按钮调用操作，如下所示：

<MButton 
    text="LOGIN" 
    onPress={() => this.props.dispatch(doAuth(this.state.email, this.state.password))}
/>

在this.state.email和this.state.password上方包含来自Textinput的电子邮件和密码。

这是我的操作 doAuth.js ：

import axios from 'axios';
import * as Types from '../constants';
import Api from '../../config/Api';

const doAuth = (email, password) => {
    return (dispatch) => {
        dispatch({
            type:Types.AUTHENTICATING
        });
        alert(JSON.stringify(email)); // It just alert "[object object]"
        alert(JSON.stringify(email)); // It gives me error "json.stringify cannot serialize cyclic structures react native"  
        const headers = {
            'Content-Type': 'application/json',
            'Authorization': Api.token
        }
        const data = {
            "email": "test@gmail.com",
            "password": "123456"
        }
        axios.post(`${Api.url}/login`, data, {headers}).then((response) => {
            dispatch({
                type: Types.USER_FOUND,
                data: response
            });
        }).catch((error) => {
            dispatch({
                type:Types.AUTH_ERROR,
                error
            });
        });

    }

}

export default doAuth

我还尝试通过mapDispatchToProps进行如下连接，但不起作用：

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

已更新

这是我设置电子邮件和密码的方式：

<InputBox
    label="Email Address"
    placeholder="Type Here"
    returnKeyType={"next"}
    autoFocus={true}
    value={this.state.email}
    onChange={(email) => this.setState({email})}
/>
<InputBox
    label="Password"
    placeholder="Type Here"
    textContentType="password"
    secureTextEntry={true}
    value={this.state.password}
    onChange={(password) => this.setState({password})}
/>

InputBox是带有TextInput的自定义组件，具有一些额外的样式。

所以，任何人都可以帮助我，如何将我的电子邮件和密码传递给我，以便我可以使用API进行身份验证。

Answer 1

将函数传递给mapDispatchToProps时-很好，您正在将其映射到组件的props。您有两种选择：

在mapDispatchToProps中不传递任何内容：

export default connect(mapStateToProps, null)(Login);

并导入doAuth函数：

import doAuth from "doAuth"

然后您将可以使用此功能：

this.props.dispatch(doAuth(.....))

传递mapDispatchToProps，然后直接调用：

this.props.doAuth(....)

现在，这似乎是您的实际问题-如果将[Object Object]设为email，则似乎是在传递对象作为参数。尝试记录this.state.email：

onPress={() => {
console.log(this.state.email)
this.props.dispatch(doAuth(this.state.email, this.state.password))
}}

Answer 2

不要使用this.props.dispatch(...)调用映射的调度，只需调用this.props.mappedDispatch(...)。

<MButton 
    text="LOGIN" 
    onPress={() => this.props.doAuth(this.state.email, this.state.password)}
/>

编辑：将export default connect(mapStateToProps, null)(Login)更改为export default connect(mapStateToProps, mapDispatchToProps)(Login)。您正在将null作为第二个参数传递给connect()

编辑2：应该在onChange={...}组件中将onChangeText={...}道具替换为InputBox。

Answer 3

您已经将reducer映射到了'mapDispatchToProps'

您在此处定义的任何内容都将作为道具提供，因此您可以使用

将doAuth作为登录按钮的OnClick调用

// code
onClick = (event) => props.doAuth( username, password)

但是分派调用是错误的，您应该使用事件名称进行分派（事件名称是在简化的开关情况下定义的）

如何传递参数以响应本地还原操作？

3 个答案: