Как передать параметр, чтобы реагировать на нативное действие редукса?

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

Не вызывайте отправленную карту с помощью 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()

Edit 2: Реквизит onChange={...} следует заменить на onChangeText={...} в InputBox компоненте.

Answer 2

У вас уже есть преобразователь, отображенный в 'mapDispatchToProps'

Все, что вы здесь определите, будет доступно вам как опора, так что вы можетевызовите doAuth как OnClick для кнопки входа в систему с помощью

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

Но диспетчерский вызов неверен, вы должны использовать имя события для отправки (имя события было определено в уменьшенном случае переключения)

Answer 3

Когда вы передаете свою функцию mapDispatchToProps - ну, вы сопоставляете ее с подпорками вашего компонента. У вас есть два варианта:

1. Не пропустите ничего в mapDispatchToProps:

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

и функция импорта doAuth:

import doAuth from "doAuth"

Тогда вы сможете заставить это работать:

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

2. Передайте 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))
}}