React-intlで多言語化 ~ Redux + redux-sagaで言語設定をredux内で取得する

react-intelを使うとサイトの多言語化がいいかんじにできます。

ただ、reduxの処理内に書いたテキストを翻訳するためのAPIとかはありません。redux向けに作られたものではないので当然ですよね。

reducerに言語設定を入れる

とりあえずredux内で扱えるようにデータを入れましょう。まずはアクションを作ります。

export function updateLanguage(lang = 'ja') {
 return {
 type: 'UPDATE_LANG',
 lang,
 };
}

続いてreducerを用意します

export function lang(state = 'ja', action) {
 switch (action.type) {
  case 'UPDATE_LANG':
   return action.lang;
  default:
   return state;
 }
}

combineReducersもわすれずに。

const rootReducer = combineReducers({
 router: routerReducer,
 intl: intlReducer,
 lang:
})

初期設定をreducerに保存する

configureStoreで言語の初期設定を行いますので、以下のようにしてactionを発行しておきましょう。

const initialLang = 'ja';
const initialState = {
  intl: {
    defaultLocale: initialLang,
    locale: initialLang,
    messages: messages[initialLang],
  },
};

const store = configureStore(initialState);
store.dispatch(updateLanguage(initialLang));

redux-sagaのselectで取得する

redux-sagaにはselectでreducerにストアされた値にアクセスできます。

以下のようなjsファイルを用意しておきましょう。

export const langSelector = state => state.lang;

あとはsagaの中でyield select(langSelector)のようにすればOKです。

取得した値を使ってメッセージを出し分けましょう。

export function * example() {
 while (true) {
   yield take('EXAMPLE_ACTION')
   const lang = yield select(langSelector)
   if (lang === 'ja') {
     console.log('日本語')
   } else {
     console.log('English')
   }
 }
}

おわりに

正直あまりスマートな感じはしてません。が、とりあえずこれで目的は達成できるので、いい感じのライブラリが見つかるまではこれで頑張ろうと思います。