Ứng dụng đa ngôn ngữ React-intl: thay đổi ngôn ngữ và bản dịch lưu trữ

Question

Tôi có ứng dụng phản ứng-bộ định tuyến và muốn thêm i18n. Trong phản hồi-intl example thành phần gốc được bao bọc trong IntlProvider:

ReactDOM.render(
<IntlProvider locale="en"> 
    <App /> 
</IntlProvider>, 
document.getElementById('container') 

);

Nhưng chỉ có một miền địa phương. Cách cập nhật ứng dụng để thêm các ngôn ngữ khác và cách tốt nhất để lưu trữ bản dịch là gì?

Answer 1

tôi đã phải đối mặt với cùng một vấn đề và đây là những gì tôi phát hiện ra:

Để thay đổi ngôn ngữ tôi sử dụng giải pháp cung cấp here, mà về cơ bản ràng buộc IntlProvider để ReduxStore với chức năng Connect. Cũng đừng quên bao gồm khóa để hiển thị lại các thành phần về thay đổi ngôn ngữ. Đây là về cơ bản tất cả các mã:

Đây là ConnectedIntlProvider.js, chỉ cần liên kết mặc định IntlProvider (chú ý prop quan trọng mà là mất tích trong nhận xét gốc trên github)

import { connect } from 'react-redux'; 
import { IntlProvider } from 'react-intl'; 

// This function will map the current redux state to the props for the component that it is "connected" to. 
// When the state of the redux store changes, this function will be called, if the props that come out of 
// this function are different, then the component that is wrapped is re-rendered. 
function mapStateToProps(state) { 
    const { lang, messages } = state.locales; 
    return { locale: lang, key: lang, messages }; 
} 

export default connect(mapStateToProps)(IntlProvider); 

Và sau đó trong tập tin điểm vào của bạn:

// index.js (your top-level file) 

import ConnectedIntlProvider from 'ConnectedIntlProvider'; 

const store = applyMiddleware(thunkMiddleware)(createStore)(reducers); 

ReactDOM.render((
    <Provider store={store}> 
    <ConnectedIntlProvider> 
     <Router history={createHistory()}>{routes}</Router> 
    </ConnectedIntlProvider> 
    </Provider> 
), document.getElementById(APP_DOM_CONTAINER)); 

Điều tiếp theo cần làm là chỉ thực hiện giảm tốc để quản lý ngôn ngữ và tạo người tạo hành động thay đổi ngôn ngữ theo yêu cầu.

Để biết cách tốt nhất để lưu trữ bản dịch - tôi đã tìm thấy nhiều cuộc thảo luận về chủ đề này và tình hình có vẻ khá bối rối, thành thật mà nói, tôi rất bối rối khi các nhà sản xuất tập trung vào các định dạng ngày và số dịch. Vì vậy, tôi không biết cách hoàn toàn chính xác để xử lý nó, nhưng đây là những gì tôi làm:

Tạo thư mục "miền địa phương" và bên trong tạo ra các tệp như "en.js", "fi.js", "ru.js", v.v. Về cơ bản tất cả các ngôn ngữ bạn làm việc cùng.
Trong mỗi tập tin xuất khẩu đối tượng json với bản dịch như thế này:

export const ENGLISH_STATE = { 
    lang: 'en', 
    messages: { 
     'app.header.title': 'Awesome site', 
     'app.header.subtitle': 'check it out', 
     'app.header.about': 'About', 
     'app.header.services': 'services', 
     'app.header.shipping': 'Shipping & Payment', 
    } 
} 

file khác có cấu trúc tương tự chính xác nhưng với chuỗi dịch bên trong.
Sau đó, trong bộ giảm tốc chịu trách nhiệm cho việc thay đổi ngôn ngữ nhập tất cả các tiểu bang từ các tệp này và tải chúng vào kho lưu trữ Redux ngay khi hành động thay đổi ngôn ngữ được gửi đi. Thành phần của bạn được tạo ở bước trước sẽ tuyên truyền những thay đổi đối với IntlProvider và ngôn ngữ mới sẽ diễn ra. Xuất nó trên trang bằng cách sử dụng <FormattedMessage> hoặc intl.formatMessage({id: 'app.header.title'})}, đọc thêm về điều đó tại wiki github của họ.
Họ có một số chức năng DefineMessages ở đó, nhưng thành thật mà nói tôi không thể tìm thấy bất kỳ thông tin tốt nào về cách sử dụng nó, về cơ bản bạn có thể quên nó và được OK.