连接REDX功能不与反应原生

Question

我想配置REDX与react-native我面临一个错误称为undefined不是一个函数，当试图从我的组件调用一个动作， 看来，行动）函数调用不正确，我无法在表单组件中访问状态作为prop。
这是我的代码：

index.android.js

import React, { Component } from 'react'; 
    import { Provider } from 'react-redux'; 
    import { createStore, applyMiddleware } from 'redux'; 
    // import ReduxThunk from 'redux-thunk'; 
    import reducers from './src/reducers'; 
    import { Form } from './src/components/Form'; 
    import { AppRegistry } from 'react-native'; 

    export class App extends Component { 

    componentWillMount() { 
     //here we will handle firebase sutup process for the authntication purpose . 
    } 

    render() { 
     const store = createStore(reducers); 
     return (
     <Provider store={store}> 
      <Form /> 
     </Provider> 
    ); 
    } 
    } 

    const styles = { 
    main: { 
     flex: 1, 
     flexDirection: 'column', 
     justifyContent: 'flex-start', 
    } 
    }; 

    AppRegistry.registerComponent('test',() => App); 

Form.js

import React, { Component } from 'react'; 
    import { connect } from 'react-redux'; 
    import { bindActionCreators } from 'redux'; 
    import { Image } from 'react-native'; 
    import { emailChanged } from '../actions'; 
    import { Container, ContainerSection, Button, Input } from '.././components/common'; 

    export class Form extends Component { 

     onEmailChange(text) { 
      //call the action creator for the email 
      this.props.emailChanged(text); 
     } 

     onPasswordChange(text) { 
      //call the action creator for the password 
     } 

     onButtonPress() { 
      //do something 
     } 

     renderButton() { 

      return (
       <Button onPress={this.onButtonPress.bind(this)}> 
        Log in 
       </Button> 
      ); 
     } 

     render() { 
      return (
       <Container> 
        <ContainerSection> 
         <Image source={require('../../images/logo.png')} /> 
        </ContainerSection> 
        <ContainerSection> 
         {/* email input */} 
         <Input 
          label="Email" 
          placeholder="email@gmail.com" 
          value={this.props.email} 
          onChangeText={this.onEmailChange.bind(this)} 
          keyboardType="email-address" 
         /> 
        </ContainerSection> 
        <ContainerSection> 
         {/* password input */} 
         <Input 
          label="password" 
          placeholder="password" 
          value={this.props.password} 
          onChangeText={this.onPasswordChange.bind(this)} 
          secure 
         /> 
        </ContainerSection> 
        <ContainerSection> 
         {this.renderButton()} 
        </ContainerSection> 
       </Container> 
      ); 
     } 
    } 

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

    function mapDispatchToProps(dispatch) { 
     return bindActionCreators({ emailChanged }, dispatch); 
    } 

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

index.js（动作文件夹中）

import { EMAIL_CHANGED, PASSWORD_CHANGED } from './types'; 
    //it is an action creator 
    export const emailChanged = (text) => { 
     return { 
      type: EMAIL_CHANGED, 
      payload: text 
     }; 
    }; 

    //it is an action creator 
    export const passwordChanged = (text) => { 
     return { 
      type: PASSWORD_CHANGED, 
      payload: text 
     }; 
    }; 

个

index.js（减速机文件夹中）

import { combineReducers } from 'redux'; 
import AuthReducer from './AuthReducer'; 

export default combineReducers({ 
    auth: AuthReducer 
    // employeeForm: EmployeeFormReducer, 
    // employees: EmployeeReducer 
}); 

AuthReducer.js

import { 
     EMAIL_CHANGED, 
     PASSWORD_CHANGED 
    } from '../actions/types'; 

    const INITIAL_STATE = { 
     email: '', 
     password: '' 
    }; 

    export default (state = INITIAL_STATE, action) => { 
     switch (action.type) { 
     case EMAIL_CHANGED: 
      return { ...state, email: action.payload }; 
     case PASSWORD_CHANGED: 
      return { ...state, password: action.payload }; 
     default: 
      return state; 
     } 
    }; 

Answer 1

我终于解决了这个错误，首先我改变我把提供的代码的结构和index.android商店.js文件直接，那之后，我改变了这一功能：

function mapDispatchToProps(dispatch) { 
    return bindActionCreators({ emailChanged }, dispatch); 
} 

这样：

function mapDispatchToProps (dispatch) { 
    return { 
    emailChanged:() => dispatch(emailChanged()) 
    } 
} 

不使用bindActionCreators 然后我用纱线加，
感谢萨沙最好的说明还可能需要确保你已经通过NPM安装下列包安装的依赖：

"babel-plugin-transform-decorators-legacy": "^1.3.4", 
"babel-preset-es2015": "^6.24.1", 
"babel-preset-react-native": "^3.0.2", 
"babel-preset-stage-0": "^6.24.1", 

也确保您.babelrc有：

{ 
"presets": ["react-native", "es2015", "stage-0"], 
"sourceMaps": true, 
"plugins": [ 
["transform-decorators-legacy"], 
] 
} 

重要的一点要考虑的是：无论是反应，Redux的团队一般不鼓励使用的连接（）作为装饰，为多款原因之一。规范仍然不稳定，Babel插件仍在改变，甚至在插件运行时，使用connect（）作为装饰器可能会导致开发人员的观点出现意外的行为。

这对我有效，但如果它仍然不能与你一起工作尝试使用connect（）作为函数而不是装饰器。

这些更改解决了错误！希望这会帮助你。 谢谢大家。

Answer 2

尝试使用调度从任何组件调用。这样

Form.js

this.props.dispatch(emailChanged(text)); 

Answer 3

尽量刚好路过emailChanged直接。

return bindActionCreators（emailChanged，dispatch）;

Answer 4

请尝试这个东西在你Form.js

import React, { Component, PropTypes } from 'react'; 
    import { connect } from 'react-redux'; 
    import { bindActionCreators } from 'redux'; 
    import { Image } from 'react-native'; 
    import { emailChanged } from '../actions'; 
    import { Container, ContainerSection, Button, Input } from '.././components/common'; 

    export class Form extends Component { 
    constructor(props) { 
     super(props) 
     this.onPasswordChange= this.onPasswordChange.bind(this) 
    } 
     onEmailChange(text) { 
      //call the action creator for the email 
      this.props.emailChanged(text); 
     } 

     onPasswordChange(text) { 
      //call the action creator for the password 
     } 

     onButtonPress() { 
      //do something 
     } 

     renderButton() { 

      return (
       <Button onPress={this.onButtonPress.bind(this)}> 
        Log in 
       </Button> 
      ); 
     } 

     render() { 
      return (
       <Container> 
        <ContainerSection> 
         <Image source={require('../../images/logo.png')} /> 
        </ContainerSection> 
        <ContainerSection> 
         {/* email input */} 
         <Input 
          label="Email" 
          placeholder="email@gmail.com" 
          value={this.props.email} 
          onChangeText={this.onEmailChange.bind(this)} 
          keyboardType="email-address" 
         /> 
        </ContainerSection> 
        <ContainerSection> 
         {/* password input */} 
         <Input 
          label="password" 
          placeholder="password" 
          value={this.props.password} 
          onChangeText={this.onPasswordChange} 
          secure 
         /> 
        </ContainerSection> 
        <ContainerSection> 
         {this.renderButton()} 
        </ContainerSection> 
       </Container> 
      ); 
     } 
    } 

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

    FlipCardWithImage.propTypes = { 
    emailChanged : PropTypes.func, 

} 
function mapDispatchToProps(dispatch) { 
    return bindActionCreators({ emailChanged }, dispatch); 
} 

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

Answer 5

昨天同样的事情发生在我身上。但是当我将所有的代码文件复制到前一个项目时，它就起作用了。所以它必须是安装损坏的东西，因为使用相同的软件包进行安装的方式相同。在一个项目中连接工作，而另一个则不工作。