TypeScript × ReduxToolKitでブログアプリを作りました

# はじめに
TypeScriptやReduxToolKitを用いて、ブログアプリを作成しました。
今後も改良を重ね、自身の技術ブログのようなものにしていこうと思います。

# Redux
`state（状態）を容易に管理をするためのフレームワーク`のことです。
Reduxを用いることで、stateを様々なコンポーネントで簡単に使い回せるようになりました。

### なぜReduxを使うのか
- stateを管理し易くなるため
- stateの変更を遡れる拡張（Redux DevTool）など、便利なツールを使った開発が可能なため

開発を進めていく中で、いままでは`console.log`でデータの値などを確認していましたが、`Redux DevTool`を使うことで簡単に現在のstateの状態や、変化した値などを確認することが出来てとても便利でした。

### Reduxの主な要素
- Action
- Reducer
- Store

#### Action
> ActionをStoreへdispatch（送信）すると、Storeのstateが変更されます。
stateの変更は必ずActionを経由して行う。


#### Reducer
> Storeから受け取ったActionとstateに応じて、変更されたstateを返す純粋関数（同じ引数を渡されたら必ず同じ結果を返す関数）。

#### Store
> アプリケーションの全てのstateを保持するオブジェクト。

>ActionをStoreにdispatchする手段（store.dispatch()）を提供する。また、stateとdispatchされたActionを、指定したReducerに渡してstateを変更する。


# redux-toolkit
redux-toolkitはReduxをさらに便利に、使いやすくしてくれるツールキットです。

```test.ts
const todosSlice = createSlice({
  name: 'todos',     // ①
  initialState: [],  // ②
  reducers: {
    addTodo(state, action) {  // ③
      const { id, text } = action.payload
      state.push({ id, text, completed: false }) // ④
    }
  }
})

```
1. sliceの名前
1. stateの初期値
1. reducerの定義
1. stateにデータを追加する

redux-Toolkitでは上記のように、簡潔にコードを書くことが出来ます。

### redux-toolkitを使うメリット
- コード記述量が少なくなる
1. コードの可読性が高くなる
1. stateのイミュータブル性を意識しなくて良い(ミュータブルは変更可、イミュータブルは変更不可という意味。)



# 自身が今回の課題をこなす上で苦労した点
CreateAsyncThunkを取り入れる際に、ロジックの書き方がわからず苦戦しました。

https://www.youtube.com/watch?v=aAwcuLoDqO4&amp;t=831s

こちらの、あべちゃんさんの動画を紹介してもらい、参考にすることでなんとか土台となるロジックを組むことが出来、そこからは少しずつ自身で考えながら進んでいくことが出来ました。


# 苦労した点をどのように克服したか

やはり、前回と同じように”積極的に質問する”ということに重点を置きました。

「３０分考えてもわからない場合は質問する」というあべ塾のモットーが非常に効果的です。

もちろん、まずは自身でしっかり考えないと意味がないのですが、それでもわからないところはどんどん質問していきます。

質問する際は、きちんと”テンプレート”に沿って質問文を作ります。
そうすることで、自身のなかで考えが整理され、回答が返ってくる前に自分で答えにたどり着けることも多々ありました。

なので、質問出来る環境がありそこをしっかり活用することで、自身の成長度が加速するように思います。

# 参考サイト
https://github.com/reduxjs/cra-template-redux-typescript

https://www.youtube.com/watch?v=uGVtNuJ9Jvw&list=PLtbitg0evatg24WZm9Q8wTIP-We2V0OpZ&index=2

https://photoshopvip.net/118535

https://photoshopvip.net/118535

https://note.com/fjkn/n/n38a2a8a71d99

https://qiita.com/Takepepe/items/f1ba99a7ca7e66290f24

https://zenn.dev/ogakuzuko/articles/react-typescript-for-beginner

https://itsakura.com/js-date

https://abhimanyuchauhan-61309.medium.com/createasyncthunk-in-redux-toolkit-4d8d2f0412d3

https://blog.agile.esm.co.jp/entry/git-warns-pulling-without-specifying-how-to-reconcile-divergent-branches

https://stackoverflow.com/questions/50950011/axios-post-request-fails-with-error-status-code-500-internal-server-error

https://tsuyopon.xyz/2019/01/31/understand-4-http-methods/#POST_users

https://zenn.dev/kazuma1989/articles/68c2339e056530

https://techacademy.jp/magazine/21239

https://github.com/RIP21/react-simplemde-editor/issues/90

https://codehero.jp/css/50319847/cannot-change-font-size-of-text-field-in-material-ui

https://zenn.dev/hayata_yamamoto/articles/github-access-key

# まとめ
前回に引き続き、TypeScriptを土台としてアプリを作成することで、少しずつその扱い方になれてきて、「自身でコーディングをしている」という実感が湧きつつあります。

今回はReduxToolKitやJSON serverなど、新たに手を付ける機能もあり、やはり頭を抱える箇所もありましたが、ひとつまたひとつと成長を実感しています。

今後は技術の向上はもちろんのことながら、自分の力で答えを見つける”検索力”や、転職活動に向けての”自己分析”などにも、少しずつ取り組んでいこうと思います。