چند زبانه کردن react redux

- 1 هفته پیش
توسط علی بیات آپدیت شد
behnamshateri ( 200 تجربه )
2 هفته پیش

سلام
در مورد چند زبانه کردن react redux بهترین package چی هستش، و اینکه کسی نمونه کدش رو داره که بتونم الگو برداری کنم

علی بیات ( 28252 تجربه )
2 هفته پیش

@behnamshateri

پکیج‌های زیر:
https://www.npmjs.com/package/react-localize-redux
https://www.npmjs.com/package/react-redux-multilingual
https://github.com/stssoftware/redux-multilanguage
https://github.com/yahoo/react-intl

من از بین این موارد با "react-redux-multilingual" کار کردم لایبرری کوچک (۶ KB) و کارآمدیه

برای نصب:

npm i react-redux-multilingual --save

لود کردن پکیج:

import translations from './translations'
import { IntlReducer as Intl, IntlProvider } from 'react-redux-multilingual'
import { createStore, combineReducers } from 'redux'
import { Provider } from 'react-redux'
import App from './App'

let reducers = combineReducers(Object.assign({}, { Intl }))
let store = createStore(reducers)

ReactDOM.render(
  <Provider store={store}>
    <IntlProvider translations={translations} locale='fa'>
      <App />
    </IntlProvider>
  </Provider>
, document.getElementById('root'))

فرمت ترجمه:
پراپ translations بالا آبجکتی با این فرمت رو نیز داره:

{
  en: {
    locale: 'en-US',
    messages: {
      hello: 'Hello {name}'
    }
  },
  fa: {
    locale: 'fa-IR',
    messages: {
      hello: 'سلام {name}'
    }
  }
}

طریقه استفاده:
۱:

import { withTranslate } from 'react-redux-multilingual'

const App = ({ translate }) = {
  return (
    <div>
      {translate('hello', { name: 'John Doe' })}
    </div>
  )
}

module.exports = withTranslate(App)

۲:

const App = (props, context) => {
  return (
    <div>
      {context.translate('hello', { name: 'John Doe' })}
    </div>
  )
}

App.contextTypes = {
  translate: React.propTypes.func
}

module.exports = App

تنظیم زبان پیش‌فرض:
۱: زبان پیش فرض رو به استیت آغازین در ردوسر پاس بدید.

let store = createStore(reducers, { Intl: { locale: 'fa'}})

۲: از طریق دیسپچ‌کردن:

import { IntlActions } from 'react-redux-multilingual'
let store = createStore(reducers)
store.dispatch(IntlActions.setLocale('fa'))
behnamshateri ( 200 تجربه )
1 هفته پیش

@ali.bayat78
مچکرم بابت راهنماییتون.

علی بیات ( 28252 تجربه )
1 هفته پیش

@behnamshateri
خواهش میکنم. موفق باشید

برای ارسال پاسخ باید وارد سایت شوید