javascript - react-redux-i18n 切换语言

Question

我遵循了这个库的自述文件:url . 一切都很好，除了一件事:我怎么能从内部切换语言，例如，我的组件？

我尝试在我的 NavBar 组件中使用一个 Action ，但它返回给我“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);

Answer 1

虽然这有点老了，但这种方法可能对其他人有帮助:

您可以使用“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进一步阅读。