今更だけどRedux-Toolkit(RTK)に移行する

![react_redux.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320164/2dc54871-7f9a-7ee8-9f56-65cb3a7321c4.png)

## 前書き
移行やリプレースなど、何かのきっかけがなければやりたくないですよね、特に性能面のアップが見込めなければ尚更です:sweat_smile:
`Redux-Toolkit`のことに関しては、前から噂は聞いてましたが、「定型文」の削減以外特にメリットなさそうだから:rolling_eyes:ずっと放置してました:upside_down:
此間Reduxの公式ドキュメントを開いてみたら、<b>なんと!</b>、`Redux-Toolkit`がreduxのデフォルトスタイルになってるようです:scream:
流石にReactユーザーとしては、無視できないレベルに来たようです:sweat_smile:

## Redux-Toolkitとは何か
```
Reduxのリポジトリにある公式なライブラリです。
Redux自体は軽量で限られた部分を担うライブラリのため、関連ライブラリなども豊富なで多くの選択肢やプラクティスが存在します。
なのでそれらを公式がまとめ、最適化したものがこのredux-toolkitです
```
:point_up_tone1:Reduxの最適化ツールの訳です。
[公式ドキュメント](https://redux-toolkit.js.org/introduction/getting-started)

## 既存プロジェクト構成

- react: 17.0.1
- redux: 4.0.5
- react-redux: 7.2.2
- redux-saga: 1.1.3

## 移行手順

`Redux-Toolkit`をインストールします。

```
# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit
```
:point_up_tone1:ファイル構成は人それぞれだと思いますが、修正箇所だけ見てください。
:raised_hand_tone1:修正なしの部分は`...`として、記述から省きます。
インストール完了後、ますは`store`から変えていきます。

- 既存store

```typescript:index.ts
...
import { createStore, applyMiddleware } from "redux";
import createSagaMiddleware from "redux-saga";
import { createRootReducer } from "./reducers";
import { composeWithDevTools } from "redux-devtools-extension";

const history = createBrowserHistory();
const reactRouterMiddleware = routerMiddleware(history);
const sagaMiddleware = createSagaMiddleware();
...
const store = createStore(
   createRootReducer(history),
   composeWithDevTools(applyMiddleware(
     reactRouterMiddleware,
     sagaMiddleware,
   )),
);
...
```

- 修正後

```typescript:index.ts
import { configureStore } from "@reduxjs/toolkit";
import createSagaMiddleware from "redux-saga";
import { createRootReducer } from "./reducers";

...
const history = createBrowserHistory();
const reactRouterMiddleware = routerMiddleware(history);
const sagaMiddleware = createSagaMiddleware();

const store = configureStore({
  reducer: createRootReducer(history),
  middleware: (getDefaultMiddleware) => [...getDefaultMiddleware(), sagaMiddleware, reactRouterMiddleware],
  devTools: true,
});
```
:point_up_tone1:`redux-devtools-extension`がデフォルトで設定されており、booleanで切り替え可能です。

次は`reducers`を修正します。

- 修正前

```typescript:reducers.ts
...
import { combineReducers } from "redux";
...
```

- 修正後

```typescript:reducers.ts
...
import { combineReducers } from "@reduxjs/toolkit";
...
```

以上、終わりです。:point_up_tone1:
`Redux-Toolkit`は`Redux`との互換性が優れているため、これだけの修正で移行は終了です。

## sliceの使用

`Redux-Toolkit`使用する場合、一番のメリットは`slice`機能です。
[公式ドキュメント](https://redux-toolkit.js.org/api/createslice)

`slice`を作ることで、`Action`、`Reducer`、`Selector`というそこそこの量の「定型文」を無くせます。

:point_up_tone1:具体例を見てみます
既存のスタイルでとあるリソースをredux使用して管理する場合、大体下記のような構造が必要です。

```
|-- store
|-- resource
|-- |-- actions.ts
|-- |-- reducer.ts
|-- |-- sagas.ts
|-- |-- index.ts
|-- index.ts
|-- reducers.ts
|-- sagas.ts
```
`actions.ts`や `reducer.ts`に通常大量な 「定型文」が存在します:frowning2:

`slice`を使用する場合:point_down_tone1:これだけで終わりです。

```
|-- store
|-- resource
|-- |-- slice.ts
|-- index.ts
|-- reducers.ts
|-- sagas.ts
```
`slice`の中身は以下のように定義します。
:point_up_tone1:もしESlint使用する場合、`.eslintrc.yml`に下記のルールを追加してあげる必要があります。

```yml:.eslintrc.yml
rules:
  no-param-reassign:
    - off  
```

```typescript:slice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit'

interface CounterState {
  value: number
}

const initialState = { value: 0 } as CounterState

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment(state) {
      state.value++
    },
    decrement(state) {
      state.value--
    },
    incrementByAmount(state, action: PayloadAction<number>) {
      state.value += action.payload
    },
  },
})

// 下記二行に注目してください。
export const { increment, decrement, incrementByAmount } = counterSlice.actions
export default counterSlice.reducer
```
:point_up_tone1:`slice`一個定義すれば、 `action`と`reducer`は自動的に内包されます。

## 非同期Reduxの処理

```typescript:slice.ts
import { createSlice, PayloadAction, createAsyncThunk } from '@reduxjs/toolkit'

interface CounterState {
  value: number
}

const initialState = { value: 0 } as CounterState

export const getNumber = createAsyncThunk(
  "counter/getNumber",
  async () => {
    const { data } = await incrementAPI();
    return data.number;
  },
);

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {}
  extraReducers: {
    [getNumber.pending.type]: (state) => {
    },
    [getNumber.fulfilled.type]: (state, action) => {
      state.value = action.payload;
    },
    [getNumber.rejected.type]: (state) => {
    },
  },
})
```

`reducers.ts`に`slice`を追加します。

```typescript:reducers.ts
...
import { counterSlice } from "./resource/slice";

export interface RootState {
  counterSlice: ReturnType<typeof counterSlice.reducer>;
}

...
export const createRootReducer = (history: History) => combineReducers<RootState>({
  counterSlice: counterSlice.reducer,
});
```

コンポネートでの呼び出し方。

```typescript:index.tsx
...
import { getNumber } from 'store/resource/slice';

export const ResourceContainer = () => {
  const { value } = useSelector((state: RootState) => state.counterSlice);
  useEffect(() => {
    dispatch(getNumber());
  }, []);
...
}

```

## 最後
slice使用すると、直接stateに修正してるように見えますが、実はそうではないらしいです。
それ以外は見えやすくなったので、個人的には好きです。