経緯

このブログサイトを作っていて、4月から本格的に英語対応も考えて作成しているのですが、とにかく表示の部分はこだわりたいと思っていました。
せっかくのモダンないい技術を使っているのでUX部分もこだわりたいと考え今回Reduxに置き換えようと思いました。

技術選定の部分

元々の要件として

• Booleanの英語かどうかを持つステートを管理するだけであり、これからもプロダクトとして発展することはない
• アプリケーション全体を管理できる状態管理ライブラリを使いたい
• 前にRedux使ったことがあるけど、Toolkitってどうなのかな？オールインワンらしいし笑

みたいな感じで今回はRedux Toolkitにしました。

実際に書いたコード

自分は技術を使うときは公式サイトのから入る派なので公式サイトを使ってやりましたが、公式より簡単な実装？になっていると思います。
参考サイトはこちらから

npmでパッケージのインストール

$ npm install @reduxjs/toolkit react-redux

で必要なライブラリを入れましょう！

ストアの作成

今回は概念などについては省かさせていただきます。。。
src/store.ts

import { configureStore } from '@reduxjs/toolkit';
import englishReducer from './features/english/englishSlice';


export const store = configureStore({
  reducer: {
    english: englishReducer,
  },
});


// ストアから `RootState` と `AppDispatch` の型を推論する。
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

みたいな感じで実装します！

アプリケーション全体で管理できるようにプロバイダーの読み込み

src/pages/_app.tsx

import { store } from '../store';
import { Provider } from 'react-redux';

// return分の中のデフォルトのコンポーネントタグを装飾してください！
<Provider store={store}>
        <Component {...pageProps} />
</Provider>

みたいな感じです！

スライスの作成

features/english/englishSlice.ts

import { createSlice } from '@reduxjs/toolkit';


export interface EnglishState {
  value: boolean;
}


const initialState: EnglishState = {
  value: false,
};


export const englishSlice = createSlice({
  name: 'english',
  initialState,
  reducers: {
    changeLanguage: (state) => {
      state.value = !state.value;
    },
  },
});


// action creater = reducer functionごとに生成される
export const { changeLanguage } = englishSlice.actions;
export default englishSlice.reducer;

みたいな感じです！

最後にそれぞれのページで記述するのみ！

例：　src/components/Button.tsx

import { NextPage } from 'next';
import { useDispatch, useSelector } from 'react-redux';
import { changeLanguage } from '../features/english/englishSlice';
import { RootState } from '../store';


interface ButtonProps {}


const Button: NextPage<Props> = () => {
  const english = useSelector((state: RootState) => state.english.value);
  const dispatch = useDispatch();
// english value
console.log(english)
  return (
    <button
      onClick={() => dispatch(changeLanguage())}
    >
    </button>
  );
};


export default Button;

みたいな感じで値を確認できます！（後日しっかりとした解説ができる機会があればやらせていただきます。）

感想

英語化するのはIssueの一つでもあったので無事に解決することができて良かったです。
やっぱりRecoilなりReduxなりかなり使いやすくPropsバケツリレーを防げるというメリットがあって可読性を含め使いやすいのでこれからも導入していこうと思います。
これからも改善すべきことなどがあれば教えていただけると幸いです🍴

英語版ログ

probably -> たぶん,おそらく,十中八九は
explained -> 説明する,explainの過去形、または過去分詞
implement -> 道具,用具,器具,用具一式,手段,手先
decided -> はっきりした,明確な,決然とした,断固とした
concepts -> 構想,発想,コンセプト,conceptの複数形
explanation -> 説明,解釈,釈明,弁解