在 react-redux 展示组件中使用操作时遇到问题 [英] Trouble using actions in react-redux presentational component

问题描述

我是 redux 的新手，在处理展示组件和容器组件时遇到了麻烦.

I'm new to redux and having trouble wrapping my head around presentational and container components.

相关堆栈:

• react v0.14.8
• react-native v0.24.1
• redux v3.5.2
• react-redux v4.4.5

问题:

我有一个登录按钮组件，它在呈现时检查登录状态并调用 onSuccessfulLogin 操作，该操作使用用户的 Facebook 凭据更新状态.

I have a login button component, which when rendered checks the login status and calls the onSuccessfulLogin action which updates the state with the user's Facebook credentials.

但是，当尝试将其拆分为单独的展示/容器组件时，我无法调用 onSuccessfulLogin 操作:Error: onSuccessfulLogin is not defined.

However, when trying to separate this into separate presentational/container components, I'm unable to call the onSuccessfulLogin action: Error: onSuccessfulLogin is not defined.

我在这里做错了什么?我想有一些简单的事情我不明白这两个组件和 connect() 函数之间的关系.

What am I doing wrong here? I'd imagine there's something simple that I'm not understanding with the relationship between the two components and the connect() function.

展示组件 (Login.js)

import React, { PropTypes } from "react-native";
import FBLogin from "react-native-facebook-login";
import UserActions from "../users/UserActions";

class LoginPage extends React.Component {

    render() {

        const { userData, onSuccessfulLogin } = this.props;

        return (
          <FBLogin
              permissions={["email","user_friends"]}
              onLoginFound= { data => {
                  onSuccessfulLogin(data.credentials);
              }}
              />
        )
    }
};

export default LoginPage;

容器组件 (LoginContainer.js)

import { connect } from 'react-redux';
import LoginPage from "../login/LoginPage";
import UserActions from "../users/UserActions";

const mapDispatchToProps = (dispatch) => {
  return {
    onSuccessfulLogin: (userData) => {
      dispatch(UserActions.userLoggedIn(userData))
    }
  }
}

const mapStateToProps = (state) => {
  return {
    userData: state.userData
  }
}

const LoginContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(LoginPage);

export default LoginContainer;

另外，如果我想让 LoginPage 组件可以访问更新的 state.userData，我该怎么做?任何帮助表示赞赏！

Also, if I wanted to make the updated state.userData accessible to the LoginPage component, how would I do that? Any help is appreciated!

已解决！ 使用 ES6 类时，您需要在构造函数方法中调用 super(props) 以访问连接的表示组件中的容器属性:

Solved! When using ES6 classes, you're required to call super(props) in a constructor method in order to access the container's properties in the connected presentational component:

class LoginPage extends React.Component {
    constructor(props){
        super(props);
    }

    render(){    
        // ...
    }
}

推荐答案

你的容器组件应该是一个组件，它必须有一个渲染功能/要呈现的展示组件.

Your container component is supposed to be a component and it must have a render function with the dumb/presentational components you want to render.

import { connect } from 'react-redux';
import LoginPage from "../login/LoginPage";
import UserActions from "../users/UserActions";


class LoginContainer extends React.Component {
    constructor(props){
      super(props);
    }
    render() {
        return (
          <LoginPage userData={this.props.userData}
              onSuccessfulLogin={this.props.onSuccessfulLogin}
              />
        )
    }
};

const mapDispatchToProps = (dispatch) => {
  return {
    onSuccessfulLogin: (userData) => {
      dispatch(UserActions.userLoggedIn(userData))
    }
  }
}

const mapStateToProps = (state) => {
  return {
    userData: state.userData
  }
}


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

这篇关于在 react-redux 展示组件中使用操作时遇到问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！