React Native Recompose 操作未触发减速器答案

【问题标题】：React Native Recompose action not triggering reducerReact Native Recompose 操作未触发减速器
【发布时间】：2017-08-31 17:24:25
【问题描述】：

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

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 });
  };
};

到目前为止，一切都很好。但是，当我dispatch() 时，我的减速器永远不会被调用。但是reducer 正在接收其他操作（来自导航等） - 它根本没有收到来自上述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;

任何建议将不胜感激。

【问题讨论】：

标签： reactjs react-native redux react-redux recompose

【解决方案1】：

实际上，对于这种特殊情况，您可以使用 Handlers 助手完全解除。

您只需要将动作创建者传递给 react-redux 连接函数，以便将其绑定到调度函数，就像您展示的那样。更多，请查看connect 文档。您可以在 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 帮助器

【讨论】：

你好何塞。感谢您的回答！虽然不确定你在说什么。你能稍微扩展一下答案吗，也许用一些代码？

【解决方案2】：

好的，看来我能够解决这个问题。简而言之，在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);

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

【讨论】：