Preliminary React technology stack (three)

react-intl

For some projects, a single language can not meet the demand, so we have to try to use multilingual solutions to react, before using vueused when a vue-i18nmulti-language solution, but react in i18nsupport is not particularly good, so on the selectionreact-intl

$ npm or cnpm
$ npm install react-intl --save
复制代码

The multi-language matched ui is Ant Design, adaptation is also appropriate international, at the same time when switching language configuration, always feel not loaded, direct replacement is a better experience. So it is necessary reduxas a support for specific reduxuse please see my previous article

Demonstration effect

New language packs (en, zh)

First, create a new folder langthis as a local language pack.

# lang文件夹目录结构
.
├── en_US.js
├── locale
│   ├── en_US.json 
│   └── zh_CN.json
└── zh_CN.js

1 directory, 4 files

# 其中js为语言配置文件 en/英 zh/中
复制代码

Since JSON definition language

// en_US.JSON
{
    "test": "test"
}
// zh_CN.json
{
    "test": "测试"
}
// 注意本地的语言包一定要对应上
复制代码

The main configuration JS

// en_US.js
import appLocaleData from 'react-intl/locale-data/en' 
import enLocal from './locale/en_US.json'
import enUS from 'antd/lib/locale-provider/en_US'

const en = {
    data: appLocaleData, // react-intl 语言包
    locale: enLocal, // 自定义的语言包
    localeName: 'en', // 配置命名
    antd: enUS // antd 语言包
}

export default en

// zh_CN.js
import appLocaleData from 'react-intl/locale-data/zh'
import zhLocal from './locale/zh_CN.json'
import zhCN from 'antd/lib/locale-provider/zh_CN'

const zh = {
    data: appLocaleData,
    locale: zhLocal,
    localeName: 'zh',
    antd: zhCN
}

export default zh
复制代码

Binding and redux

// action 
function changeLang (text) {
    return { type: 'changeLang', text: text }
}
// 定义切换语言的action

// reducer
// 语言包
import zh from '../../lang/zh_CN'
import en from '../../lang/en_US'

// 默认语言为英文
const Initstate = {
    // 读取本地存储 来决定当前语言环境
    lang: window.localStorage.getItem('lang') === 'zh' ? zh : en
}
const Common = (state = Initstate, action) => {
    switch (action.type) {
        case 'changeLang':
                // 防止用户刷新 语言回到初始状态
                window.localStorage.setItem('lang', action.text)
                return {...state, lang: action.text === 'zh' ? zh : en}
        default:
                return state
    }
}
复制代码

In this way reduxand react-intlhas bound together, make a call changeLangin order to change the language of Morocco

Binding and react

Want to achieve multi-language switch without refresh, should the overall switching operation in reactthe execution flow, modified reduxat the same time will refresh the view layer, based on this feature will put the switch to multi-language bindings redux in.

App.jsx

Use react assembly

import React, { Component } from 'react'

import { injectIntl } from 'react-intl'

class IntlComponent extends Component {
    render () {
        let { intl } = this.props
        return (
            <div>
                { intl.messages['test'] }
                {/*调用方式*/}

                {/*有一种场景 比如获取验证码 需要有秒数 但是 中英文切换的时候 需要符合语义 那么就不能使用拼接的方式 而 react-intl 给我们提供了一种方式 formatMessage */}

                { intl.formatMessage({id: 'code_tip'},{s: '2'}) }


                {
                    /*
                        // en_US.JSON
                        {
                            "test": "test",
                            "code_tip": "Get the captcha again after {s} seconds"
                        }
                        // zh_CN.json
                        {
                            "test": "测试",
                            "code_tip": "{s}秒后重新获取验证码"
                        }
                    */
                }
            </div>
        )
    }
}

export default injectIntl(IntlComponent)
复制代码

link

my blog

Blog_demo paper react-intl_demo

react-intl examples

Epilogue

These are used to configure react-intl whole process, I will step by step to build the whole project, demo projects in my github in will describe ideas react-router usage in the project configuration process and the overall configuration of the follow-up