我按照此库中的自述文件:url。 一切都很顺利,除了一件事:我怎么能从内部切换语言,例如,我的组件?
我试图在我的NavBar组件中使用一个动作,但它返回我" this.props.dispatch"不是控制台中的功能。
这是我的组成部分:
import React from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import { logout } from '../actions/authActions';
import { Translate, Localize } from 'react-redux-i18n';
import { loadTranslations, setLocale, syncTranslationWithStore } from 'react-redux-i18n';
class NavigationBar extends React.Component {
constructor(props){
super(props);
this.changeLang = this.changeLang.bind(this);
}
logout(e) {
e.preventDefault();
this.props.logout();
}
changeLang(){
this.props.dispatch(setLocale('nl'));
}
render() {
const { isAuthenticated } = this.props.auth;
const userLinks = (
<a href="#" onClick={ this.logout.bind(this) }>Logout</a>
);
const guestLinks = (
<div>
<Link to="/signup">Signup</Link>
<Link to="/login">Login</Link>
</div>
);
return (
<div>
{ isAuthenticated ? userLinks: guestLinks }
<Translate value="application.title"/>
<br />
<a href="#" onClick={this.changeLang}>NL</a>
</div>
);
}
}
NavigationBar.propTypes = {
auth: React.PropTypes.object.isRequired,
logout: React.PropTypes.func.isRequired
}
function mapStateToProps(state){
return {
auth: state.auth
};
}
export default connect(mapStateToProps, { logout })(NavigationBar);
答案 0 :(得分:2)
虽然这有点旧,但这种方法可能有助于其他人:
您可以使用&#39; redux&#39;中的bindActionCreators
映射组件中所需的所有操作,而不必担心明确使用dispatch()
。
import {bindActionCreators} from 'redux';
// class definition ...
const mapDispatchToProps = (dispatch) => {
const actions = {
setLocale,
// ... you can specify other actions that need dispatch here
};
return {
actions: bindActionCreators(actions, dispatch) // this will set the 'actions' property to props
}
};
function mapStateToProps(state){
return {
auth: state.auth
};
}
const connectedNavigationBar = connect(
mapStateToProps,
mapDispatchToProps
)(NavigationBar);
export default connectedNavigationBar;
现在您可以像这样调用函数:this.props.actions.setLocale('nl');
您的代码将如下所示:
import React from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import { logout } from '../actions/authActions';
import { bindActionCreators } from 'redux';
import { Translate, Localize } from 'react-redux-i18n';
import { loadTranslations, setLocale, syncTranslationWithStore } from 'react-redux-i18n';
class NavigationBar extends React.Component {
constructor(props){
super(props);
this.changeLang = this.changeLang.bind(this);
}
logout(e) {
e.preventDefault();
this.props.logout();
}
changeLang(){
// changed from
// this.props.dispatch(setLocale('nl'));
this.props.actions.setLocale('nl');
}
render() {
const { isAuthenticated } = this.props.auth;
const userLinks = (
Logout
);
const guestLinks = (
Signup
Login
);
return (
{ isAuthenticated ? userLinks: guestLinks }
NL
);
}
}
NavigationBar.propTypes = {
auth: React.PropTypes.object.isRequired,
logout: React.PropTypes.func.isRequired
}
function mapStateToProps(state){
return {
auth: state.auth
};
}
const mapDispatchToProps = (dispatch) => {
const actions = {
setLocale,
// ... you can specify other actions that need dispatch here
};
return {
actions: bindActionCreators(actions, dispatch) // this will set the 'actions' property to props
}
};
const connectedNavigationBar = connect(
mapStateToProps,
mapDispatchToProps
)(NavigationBar);
export default connectedNavigationBar;
您可以查看this以进一步阅读。
答案 1 :(得分:0)
您可以发送redux操作(如readme示例用法中所示):
store.dispatch(setLocale('en'));
您可以在react-redux的帮助下在组件中使用dispatch
。只需将组件连接到redux:
import { connect } from 'react-redux';
const ConnectedComponent = connect()(YourComponent);
并且发送将作为组件中的支柱提供:
this.props.dispatch(setLocale('en'));