首页 文章

react-redux-i18n switch lang

提问于
浏览 次
0

我按照这个库上的自述文件：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"/>
                

                <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);
javascript reactjs redux internationalization jsx

2 回答

  • 0

    虽然这有点旧，但这种方法可能有助于其他人：

    您可以使用'redux'中的 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以进一步阅读 .

    回复于
  • 2

    您可以调度redux操作（如readme示例用法所示）：

    store.dispatch(setLocale('en'));

    更新：

    您可以在react-redux的帮助下在组件中使用 dispatch . 只需将组件连接到redux：

    import { connect } from 'react-redux';

const ConnectedComponent = connect()(YourComponent);

    并且调度将作为组件中的prop提供：

    this.props.dispatch(setLocale('en'));
    回复于

相关问题