[英]React native connect function not passing action to child component through props
I am just getting familiarized with redux and have been reading that I am supposed to pass in action creators through the parent of the app, and through mapStateToProps, mapDispatchToProps, and the connect function I should be able to pass actions. 我刚刚熟悉Redux,并且已经阅读到我应该通过应用程序的父级,mapStateToProps,mapDispatchToProps和connect函数传递动作创建者,我应该能够传递动作。 However, when I call in the child component this.props.
但是,当我调用子组件this.props时。 the function is nonexistent, so it seems that it is not being passed properly.
该函数不存在,因此似乎未正确传递它。
I would greatly appreciate assistance. 我将不胜感激。
Note: I left out some things like imports and the reducer to be more concise. 注意:为简化起见,我省略了一些东西,例如进口和减速器。
login.js: login.js:
export function login(token, id) {
console.log('login action');
return {
type: 'LOG_IN',
token,
id,
};
}
index.ios.js: index.ios.js:
import * as actionCreators from './actions/login'
const store = createStore(RootReducer, undefined, autoRehydrate());
persistStore(store);
class App extends Component {
constructor(props) {
super(props);
state = {
token: '',
id: '',
store: store,
};
}
render() {
return (
<Provider store={ state.store }>
<View style = {styles.container}>
<LoginView/>
</View>
</Provider>
);
}
}
AppRegistry.registerComponent('App', () => App);
function mapStateToProps(state) {
return {
token: state.token,
id: state.id
}
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({actionCreators}, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(App);
loginView.js: loginView.js:
export class LoginView extends View {
static propTypes = {}
static defaultProps = {}
constructor(props) {
console.log(props);
super(props)
this.state = {
user: '',
token: '',
id: '',
}
this.onLogin = this.onLogin.bind(this);
}
onLogin() {
console.log("on login1");
this.props.login({token: this.state.token, id: this.state.id});
console.log("on login");
}
And basically what happens is that when the onLogin() function is evoked directly above, it states that this.props.login is not a function. 基本上发生的是,当在上面直接调用onLogin()函数时,它指出this.props.login不是函数。 What is the reasoning for this and how can I fix it?
这是什么原因,我该如何解决?
You're connecting the App component, so that will have this.props.onLogin()
. 您正在连接App组件,因此将具有
this.props.onLogin()
。 However, you're not passing onLogin
as a prop to <LoginView />
. 但是,您没有将
onLogin
传递给<LoginView />
的道具。 You need to either render <LoginView onLogin={this.props.onLogin} />
, or connect LoginView also and include onLogin
as part of that component's connection. 您需要呈现
<LoginView onLogin={this.props.onLogin} />
,或者也连接LoginView并将onLogin
作为该组件连接的一部分包括onLogin
。
This line: 这行:
return bindActionCreators({actionCreators}, dispatch);
should be: 应该:
return bindActionCreators(actionCreators, dispatch);
"actionCreators" is already an object. “ actionCreators”已经是一个对象。 By passing it inside another set of curly braces, it is being interpreted as the syntax for ES6 shorthand property names.
通过将其传递到另一组花括号中,它被解释为ES6速记属性名称的语法。 What you are actually passing is a new object that look like this:
您实际传递的是一个新对象,如下所示:
{
actionCreators: {
login: ... // your action is buried here
}
}
// ^^ which would get mapped to this.props.actionsCreators.login (wrong)
seems redux connect in react native to bind state in components thase days is using 似乎在使用这些天的组件中,redux connect in react native绑定状态
import {connect} from "react-redux";
...
class HomeScreen extends React.Component {
// do your things..
constructor(props) {
super(props);
console.log(this.props);
}
render () {
....
}
}
const mapStateToProps = state => {
return { user: state.user };
};
export default connect(mapStateToProps)(HomeScreen);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.