Question

我试图创建一个LoginForm，其中我使用react-native放置UI，但是后端逻辑是通过redux框架实现的。我已经整合了Firebase库，并且正在尝试通过redux-thunk使用动作创建者和缩减者对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中什么也没有提及，我只是想确保触发动作并进行Async调用。但是这里什么也没发生。当我从console.logs打印时，我可以看到回调函数正在执行并且也调用了动作创建者，但是firebase语句没有得到执行，因为执行后，它将返回一个对象。为什么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

1 个答案: