connect redux函数不能与react-native一起使用
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了connect redux函数不能与react-native一起使用相关的知识,希望对你有一定的参考价值。
我正在尝试使用react-native配置redux我遇到一个名为undefined的错误,当尝试从我的组件调用一个动作时,它不是一个函数,似乎没有正确调用action()函数,我无法访问状态为表单组件内的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(在reducers文件夹中)
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;
}
};
尝试从任何组件使用调度调用。像这样
Form.js
this.props.dispatch(emailChanged(text));
尝试直接传递emailChanged。
return bindActionCreators(emailChanged,dispatch);
请在你的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);
最后我解决了错误,首先我改变了代码的结构,我将Provider和store存储在index.android.js直接,然后我改变了这个函数:
function mapDispatchToProps(dispatch) {
return bindActionCreators({ emailChanged }, dispatch);
}
对此:
function mapDispatchToProps (dispatch) {
return {
emailChanged: () => dispatch(emailChanged())
}
}
不使用bindActionCreators然后我使用yarn add安装了依赖项, 感谢Sacha Best,您可能还需要确保通过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"],
]
}
需要考虑的重要因素:由于各种原因,React和Redux团队通常都不鼓励使用connect()作为装饰器。规范仍然不稳定,Babel插件仍在改变,即使插件工作,使用connect()作为装饰器也可能导致开发人员的意外行为。
这对我有用,但是如果它仍然不起作用,请尝试使用connect()作为函数而不是装饰器。
这些变化解决了错误!希望这会对你有所帮助。谢谢你们。
昨天发生了同样的事情。但是,当我将所有代码文件复制到以前的项目时,它起作用了。所以它必须是安装损坏的东西,因为安装已经使用相同的包以相同的方式完成。在一个项目中,连接工作,而在另一个项目中,它不工作。
以上是关于connect redux函数不能与react-native一起使用的主要内容,如果未能解决你的问题,请参考以下文章