1

我正在使用Recompose在 React Native 中设置用户登录屏幕，其中包含单独的操作和减速器文件，但我的减速器从未被调用。目前，只有一个登录按钮会触发doUserLogin()重组处理程序：

loginScreen.js

import React from 'react';
import { Button, Text, View } from 'react-native';
import { connect } from 'react-redux';
import { withHandlers, compose } from 'recompose';
import { loginUser } from './user/userActions';

const LoginScreen = ({ user, doUserLogin }) => {
  return (
    <View style={styles.loginContainer}>
      {user ? <Text>Hi, {user.name}!</Text> : <Text>NOT Logged in!</Text>}
      <Button title="Log In" onPress={doUserLogin} />
    </View>
  );
};

export default compose(
  connect((state, props) => ({
    ...state.user,
  })),
  withHandlers({
    doUserLogin: props =>
      (event) => {
        console.log('LOGIN USER IN HANDLER'); // <-- THIS IS WORKING
        loginUser();
      },
  }),
)(LoginScreen);

doUserLogin()处理程序依次调用我的loginUser()操作文件：

userActions.js：

import { LOGIN_REQUEST } from './actionTypes';

export const loginUser = () => {
  return (dispatch) => {
    console.log('In action'); // <-- THIS IS WORKING
    dispatch({ type: LOGIN_REQUEST });
  };
};

到目前为止，一切都很好。但是，当 I 时dispatch()，我的减速器永远不会被调用。但是减速器正在接收其他动作（来自导航等） - 它根本没有从loginUser()上面接收动作：

userReducer.js：

import { LOGIN_REQUEST } from './actionTypes';

const userReducer = (state = initialState, action) => {
  console.log('In reducer'); <-- ** THIS IS NEVER CALLED **

  switch (action.type) {
    case LOGIN_REQUEST:
      return Object.assign({}, state, {
        isFetching: true,
      });
    case LOGOUT:
      return initialState;
    default:
      return state;
  }
};
export default userReducer;

任何建议将不胜感激。

4

2 回答 2

1

好的，看起来我能够解决这个问题。简而言之，loginScreen.js我需要添加mapStateToProps和mapDispatchToProps函数，它们被传递给connect. withHandlers然后可以将我的操作文件中dispatch的loginUser()函数作为道具。

更新了 loginScreen.js

import React from 'react';
import { Button, Text, View } from 'react-native';
import { connect } from 'react-redux';
import { withHandlers, compose } from 'recompose';
import { loginUser } from './user/userActions';

const LoginScreen = ({ user, doUserLogin }) => {
  return (
    <View style={styles.loginContainer}>
      {user ? <Text>Hi, {user.name}!</Text> : <Text>NOT Logged in!</Text>}
      <Button title="Log In" onPress={doUserLogin} />
    </View>
  );
};

const mapStateToProps = state => ({
  ...state.user,
});

const mapDispatchToProps = dispatch => ({
  loginUser: () => {
    dispatch(loginUser());
  },
});

export default compose(
  connect(mapStateToProps, mapDispatchToProps),
  withHandlers({
    doUserLogin: props =>
      () => {
        console.log('LOGIN USER IN HANDLER');
        props.loginUser();
      },
  }),
)(LoginScreen);

任何其他建议/建议仍将不胜感激。

于 2017-04-06T14:49:21.870 回答
1

实际上，对于这种特殊情况，您可以完全解除 withHandlers 帮助程序。

您只需将动作创建者传递给 react-redux 连接函数，以便将其绑定到调度函数，就像您展示的那样。更重要的是，检查连接文档。您可以在 connect 的第三个参数中访问组件的 props，并进一步创建依赖于 props 的处理程序。

在你的情况下，它可能是这样的

    const mergeProps = (stateProps, dispatchProps, ownProps) => {
        return Object.assign({}, ownProps, stateProps, dispatchProps, {
          doUserLogin: () => {
            console.log('LOGIN USER IN HANDLER');
            console.log('accessing a prop from the component', ownProps.user);
            dispatchProps.loginUser();
          }
        });
      }
        export default connect(mapStateToProps,
                               mapDispatchToProps,
                               mergeProps)(LoginScreen);

请注意我们如何创建新函数，这些函数将作为组件的新道具使用，类似于 withHandler 帮助器

于 2017-04-07T15:07:25.447 回答