红外闪光
工具器(动作,还原器,中件,增强器,选择器),可以帮助使用有Redux的Polyglot.
安装
npm install --save redux-polyglot
设置
首先,你需要减压器中的多块减压器:
import { createStore, combineReducers } from 'redux';
import { polyglotReducer } from 'redux-polyglot';
const rootReducer = combineReducers({
...yourReducers,
polyglot: polyglotReducer,
});
const store = createStore(rootReducer, {});
使用量
设置语言
没有中间软件
你可以使用redux-polyglot 没有他的中间软件, 为此你需要 setLanguage() 动作创建者 :
setLanguage :: (String, Object) -> Action
示例
import { setLanguage } from 'redux-polyglot';
store.dispatch(setLanguage('en', { yolo: 'yolo' }));
第二个参数应为: polyglot phrases (见 多块文档(中文(简体) )
注意: 如果语言短语已经存在, 这将覆盖相应的对象状态 .
有中间软件
这个 createPolyglotMiddleware() 函数允许您通过收听特定动作自动更新语言和短语.
在有效载荷中找到位置,然后[同步]装入 polyglot phrases (与承诺.
它需要3个参数并返回一个中间软件:
- 一、导 言
actionToCatch :: String | Array<String>- 捕获动作的类型
- 2 - 电话
getLocale :: Object -> String- 一个函数,将被捕获的动作作为参数并返回新语言.
- 3 - 3 (中文(简体) )
getPhrases :: String -> Promise Object- 使用语言的函数(由
getLocale)并返回对象的许诺(对象应为:polyglot phrases(中文(简体) )
- 使用语言的函数(由
中间软件会抓住 actionToCatch; 注意 : 当一个匹配动作被发出时, 它会返回这个被调用的承诺, 这样您就可以等待它( 在 SSR 上非常有用 )
import { createStore, combineReducers, applyMiddleware } from 'redux';
const polyglotMiddleware = createPolyglotMiddleware(
'ACTION_TO_CATCH',
action => action.payload.locale,
locale => new Promise(resolve => {
// perform async here
resolve({
hello: 'bonjour',
});
}),
)
const store = createStore(rootReducer, {}, applyMiddleware(polyglotMiddleware));
您可以捕捉一个以上的动作,通过一系列动作类型:
const polyglotMiddleware = createPolyglotMiddleware(
['FIRST_ACTION_TO_CATCH', 'SECOND_ACTION_TO_CATCH'],
getLocale,
getPhrases,
)
注:如果语言没有改变,则无事可做.
翻译
带有 eep () 选择器
你可以用这个 getP(state) 选择器.
它返回内有4个函数的对象 :
- t: 字符串 - > 字符串 : 翻译(原始多块)
t函数) - tc: 字符串 - > 字符串: 翻译资本化
- tt: 字符串 - > 字符串: 翻译标题
- tu: 字符串 - > 字符串 : 翻译大写
- tm: (string - > 字符串) - > 字符串 - > 字符串 : 使用自定义形态翻译
(见 多块文档(中文(简体) )
有可选参数可获取P( ) .
这是允许您在短语对象中自动使用“ aim” 范围 polyglotScope 属性.
例如:
store.dispatch(setLanguage('en', {
some: { nested: { data: { hello: 'hello' } } }
}));
const p = getP(store.getState(), { polyglotScope: 'some.nested.data' });
console.log(p.tc('hello')) // => will return 'Hello'
获取当前区域
getLocale(state) 选择器返回当前语言.
如果您使用反应
你用得着 connect() 从 react-redux,然后是 eCP () 选择器,以获取 p 您组件中的道具 .
宣传类型 :
p: PropTypes.shape({
t: PropTypes.func.isRequired,
tc: PropTypes.func.isRequired,
tu: PropTypes.func.isRequired,
tm: PropTypes.func.isRequired,
}),
翻译( ) 增强器
props.p 也可以方便地向一个组件提供翻译增强器:
import translate from 'redux-polyglot/translate';
const DummyComponentWithPProps = translate(DummyComponent);
您可以选择 polyglotScope 与 translate('scope', Component)
// all this lines return an enhanced Dummy component
translate(Dummy);
translate('catalog', Dummy); // with polyglotScope
translate()(Dummy); // curried
translate('catalog')(Dummy); // curried with polyglotScope.
translate({ polyglotScope : 'some.nested.data', ownPhrases: 'some.nested.data.hello': 'Hi !', ... })(Dummy); // curried with object configuration.
在组件中获取本地地址
你可以用这个 getLocale() 选择器在 a 内 地图状态选项 从反应- redux.
宣传类型 : locale: PropTypes.string,
覆盖短语
在某些情况下,您应该能够将一些默认短语替换为其他短语.
为此, 您必须定义包含您覆盖的短语的对象 .
本物体由下列物体组成: { 'some.nested.data': 'phrase', ... } 地点 key 是您想要替换的目标路径 value ...新的价值.
与 获取P( ) 选择器
简单添加 ownPhrases 属性,并设置类似上面的新配置来覆盖 :
store.dispatch(setLanguage('en', {
some: { nested: { data: { hello: 'hello' } } }
}));
const p = getP(store.getState(), {
polyglotScope: 'some.nested.data',
ownPhrases: { 'some.nested.data.hello': 'Hi !' }
});
console.log(p.tc('hello')) // => will return 'Hi !'
与 翻译( ) 增强器
而不是只经过 字符串 作为参数 : translate('catalog', Dummy),通过平地 对象 包含 polyglotScope 财务报告和审定财务报表 ownPhrases 属性 :
translate({
polyglotScope : 'some.nested.data',
ownPhrases: { 'some.nested.data.catalog': 'Cars' }
}, Dummy);
console.log(p.tc('catalog')) // => will return 'Cars'
使用多块选项
如果您想要使用的话 onMissingKey, (中文(简体) ), allowMissing 或者说 warn 多块 选项,您可以使用 createGetP 创建自定义的工厂选择器 getP。 。 。 .
用途 :
import { createGetP } from 'redux-polyglot';
const options = {
allowMissing: true,
}
export const getP = createGetP(options);
请注意您无法使用自定义的翻译 getP 选择器.
团队
这些人继续推动这个项目
- 杰雷米·文森特(签名)@jvincent42 (英语)- 开发者
- 贾利勒·阿尔法维(Jalil Arfaoui)@Jalil-Arfaoui (日语)- 开发者
- 纪尧姆·阿尔默(签名)@guillaumearm (英语)- 开发者