Question

我按照此库中的自述文件：url。一切都很顺利，除了一件事：我怎么能从内部切换语言，例如，我的组件？

我试图在我的NavBar组件中使用一个动作，但它返回我＆＃34; this.props.dispatch＆＃34;不是控制台中的功能。

这是我的组成部分：

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

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

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

Answer 2

您可以发送redux操作（如readme示例用法中所示）：

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

更新

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

import { connect } from 'react-redux';

const ConnectedComponent = connect()(YourComponent);

并且发送将作为组件中的支柱提供：

this.props.dispatch(setLocale('en'));

react-redux-i18n switch lang

2 个答案:

更新