我想配置REDX与react-native我面临一个错误称为undefined不是一个函数,当试图从我的组件调用一个动作, 看来,行动)函数调用不正确,我无法在表单组件中访问状态作为prop。
这是我的代码:连接REDX功能不与反应原生
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 protected]"
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;
}
};
我也试过这个,但它没有工作,我猜connect函数没有被调用,nothings映射到道具既不动作也不状态。 –
我阅读了文档,并尝试了所有可能的选择,我也搜索了谷歌,但没有为抱歉工作。 –
你试过'console.log(this.props)' – koox00