异步请求不会通过动作创建者发送到 Firebase

Question

我正在尝试创建一个 LoginForm，我在其中放置 UI 使用 react-native，但后端逻辑是通过 redux 框架实现的。我已经与 firebase 库集成，并尝试通过 redux-thunk 使用 action creators 和 reducer 对 firebase 进行异步调用。

App.js

.........
.........
render()
    {
        const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
        return(
        <Provider store={ store } >
            <LoginForm />
        </Provider>
        );
    }

LoginForm.js

class LoginForm extends Component
{
.........
.........
onButtonPress () {
        const { email, password } = this.props;
        this.props.loginUser({ email, password });
    }

render()
    {
<CardSection>
                    <Button onPress={this.onButtonPress.bind(this)} >
                        Login
                    </Button>
                </CardSection>
}
const mapStateToProps = ( state ) => {
    return {
        email: state.auth.email,
        password: state.auth.password
    };
};

export default connect (mapStateToProps, { emailChanged, passwordChanged, loginUser })(LoginForm);

动作 index.js

export const loginUser = ({ email, password }) => {
    console.log("Shikher1");
    return (dispatch) => {
    firebase.auth().signInWithEmailAndPassword( email, password ).then( user => {
        dispatch ({ type: 'LOGIN_USER_SUCCESS' , payload: user });
    });
    };
};

Reducer 中没有提及任何内容，我只是想确保触发操作并进行异步调用。但这里什么也没有发生。当我从 console.logs 打印出来时，我可以看到回调函数正在执行，它也调用了动作创建者，但是 firebase 语句没有被执行，因为在它执行之后，它将 return目的。为什么 firebase 语句没有被执行？

我哪里错了？

Answer 1

在您的 LoginForm.js 中，尝试添加这些行

const mapStateToProps = ( state ) => {
    return {
        email: state.auth.email,
        password: state.auth.password
    };
};

const mapDispatchToProps = dispatch => ({
    emailChanged: payload => dispatch(emailChanged(payload)),
    passwordChanged: payload => dispatch(passwordChanged(payload)),
    loginUser : payload => dispatch(loginUser (payload))
})

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

异步请求不会通过动作创建者发送到 Firebase

Async request is not going to Firebase through action creators

react-native

firebase-authentication

redux

redux-thunk

react-redux