## configureStore

通常、ReduxStoreを作成するには、createStore()を呼び出してReducer関数を渡していましたが、Redux Toolkitでは、 __configureStore()__ を使用します。

違いは、複数の引数を渡すのでなく、名前付きフィールドを持つ単一のオブジェクトを渡す点です。reducerという名前のフィールドとして渡す必要がある点に注意が必要です。

```
//Redux
const store = createStore(counter)

//Redux Toolkit
const store = configureStore({
  reducer: counter
})
```

## createAction

createActionは引数にActionTypeの文字列を受け取り、その文字列で、Action Creator関数を返します。既存の方法でAction Creatorを作るよりも、短くシンプルに書くことができます。  

```
function createAction(type, prepareAction?)
```

```
const INCREMENT = "INCREMENT";
const DECREMENT = "DECREMENT";

function incremnetOriginal() {
  return { type: INCREMENT };
}

function decrementOriginal() {
  return { type: DECREMENT };
}

console.log(incremnetOriginal(), decrementOriginal());
// { type: 'INCREMENT' } { type: 'DECREMENT' }
```

```
// createAction関数を使うことによって上記と同じ処理を短くかけます。
const incrementNew = createAction<number | undefined>('INCREMENT');
const decrementNew = createAction<number | undefined>('DECREMENT');

console.log(incremnetNew(), decrementNew());
// { type: 'INCREMENT' } { type: 'DECREMENT' }

```

ReducerでActionTypeの文字列を参照する場合は、以下２パターンの方法で書くことができます。

```
const incremnet = createAction<number | undefined>('INCREMENT');

// ①
console.log(incremnet.toString()); // "INCREMENT"
// ②
console.log(increment.type); // "INCREMENT"
```

Action Creatorは引数無しで呼び出すことも、ActionにアタッチするPayloadを指定して呼び出すことも出来ます。

```
let action = increment();
// { type: 'INCREMENT' }

action = increment(10);
// { type: 'INCREMENT', payload: 10 }
```

### prepare callbackについて

デフォルトでは、生成されたAction Creatorは単一の引数を受け入れ、それが、action.payloadになります。しかし、Action Creatorの複数のパラメータを受け入れたり、ランダムなIDを生成したり、タイムスタンプを取得したりするなど、payloadの生成をカスタマイズするために、追加のロジックを書きたい場面があったりします。これを実現するためには、createAction関数の第二引数に、payload値を構築するために使用される、__prepare callback__を指定することができます。

prepare callbackが指定された場合、Action Creatorの全ての引数は、prepare callbackに渡され、payloadフィールドの持つオブジェクトを返します。

```
import { createAction, nanoid } from '@reduxjs/toolkit';

const addTodo = createAction('todos/add', function prepare(text: string){
  return {
    payload: {
      text,
      id: nanoid(),
      createdAt: new Date.toISOString(),
    }
  }
});

console.log(addTodo('Study for App'))
/**
*{
*  type: 'todos/add',
*  payload: {
*    text: 'Study for App',
*    id: '4JIureoiO104Yijd',
*    createdAt: 2020-10-11T07:53:36.581Z'
*  }
*}
**/

```

### matchメソッドについて

生成されたAction Creatorは__.match(action)メソッド__を持っています。  
これは、渡されたActionがActionCreatorによって作成されたActionと同じTypeかどうかを判定するために使用することが可能です。

```
import { createAction, Action } from '@reduxjs/toolkit'

const increment = createAction<number>('INCREMENT')

function someFunction(action: Action) {

  if (increment.match(action)) {

  }
}
```

## createReducer

通常、ReduxのReducerは、action.typeフィールドをチェックして、ActionTypeごとに特定のロジックを実行していました。

```
function counter(state = 0, action) {
  switch (action.type) {
    case increment.type:
      return state + 1
    case decrement.type:
      return state - 1
    default:
      return state
  }
}
```

Redux Toolkitでは、createReducer関数を使用して以下のように書くことができます。ActionTypeの文字列をKeyとして使用する必要があるので、ES6の「computed property」構文を使用して、ActionType文字列からKeyを作成することが出来ます。

```
const increment = createAction('INCREMENT');
const decrement = createAction('DECREMENT');

const counter = createReducer(0, {
  [increment.type]: state => state + 1,
  [decrement.type]: state => state - 1
})
```

上記の書き方以外に以下のような書き方も可能です。
computed propertiesは、内部にあるどのような変数に対してもtoString()を呼び出すので.typeフィールドを使用せずに、ActionCreator関数を直接使用することも可能です。

```
const counter = createReducer(0, {
  [increment]: state => state + 1,
  [decrement]: state => state - 1
})
```

## createSlice

上記でAction Creatorを個別に作成していますが、createSliceを使用する事によって、State,Reducer,Action Creatorはまとめて作成することが可能です。

createSliceは、reducerとactionsを格納したsliceオブジェクトを返します。
reducerフィールドには、生成された関数、actionsフィールドには生成されたAction Creatorを格納しています。

createSliceは、以下のオプションを持つオブジェクトパラメータを受け取ります。

```
function createSlice({
    // ActionTypeでプレフィックスとして使用される名前
    name: string,
    // Reducerで使用される初期値
    initialState: any,
    // reducersオブジェクト。Key名からActionを生成します。
    reducers: Object<string, ReducerFunction | ReducerAndPrepareObject>
    // Reducerを追加するために使用されるコールバックまたは、reducersの追加オブジェクト。
    extraReducers?:
    | Object<string, ReducerFunction>
    | ((builder: ActionReducerMapBuilder<State>) => void)
})
```

reducersフィールドは、__casereducer関数（特定のActionTypeを扱うことを目的とした関数で、Switch構文内のcase文に相当__を含むオブジェクトです。KeyはActionTypeを生成するために使用されます。

```
const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: state => state + 1,
    decrement: state => state - 1
  }
})

const store = configureStore({
  reducer: counterSlice.reducer
})

document.getElementById('increment').addEventListener('click', () => {
  store.dispatch(counterSlice.actions.increment())
})
```

大体は、Destructuring assignmentを使用して、以下のように、Action CreatorやReducerを取り出すことになります。

```
const { actions, reducer } = counterSlice;
const { increment, decrement } = actions;
```

Redux Toolkitの便利関数

## はじめに

＊この記事は、あくまで現時点で知っている情報をまとめているに過ぎないので、参考程度に留めておいてください。

## Redux Toolkitとは

Reduxの開発チームが効率的で快適なDXを目指して開発されたライブラリです。  
Reduxは、最小限の機能しか持っていないため、導入するためには、役割ごとに各モジュールを自身で準備しないといけません。

それは、たとえ、Reduxに習熟したとしても、必要になる定型文のようなコードをいちいち書かなければいけない事を意味します。また、アプリの規模が大きくなってくると、様々な種類のデータをどのように持つか、Storeの分割をどのようにするかということも、各自、各チームで判断しないといけなくなります。（いくつかのパターンが提案されているのみ）

上記の問題を解決する上で、Redux Toolkitを導入することは、生産性の向上に繋がるとして、注目されているように感じます。

## 主要なAPI

主要なAPIは以下の通りです。  
各モジュールの生成やStoreの分割方法をヘルパー関数が用意されており、Reduxの導入を手助けしてくれます。

__configureStore__  
各種デフォルト値が設定可能なcreateStateのカスタム値

__createReducer__  
reducerの作成を簡単にしてくれる  
(SliceのReducerを結合する際に使うケースが多いかも)

__createAction__  
action creatorを作成する  
(createSliceを使うので、使うケースは少ないかも)

__createSlice__  
actionの定義とaction creator, reducerをまとめて生成できる

## Redux Toolkitを導入して書き直してみる

TypeScript導入していないシンプルな例で、Redux Toolkitを導入した書き換えをしてみます。
導入時のコマンドは以下の通りです。

```
npm install --save @reduxjs/toolkit react-redux
```

### 【Action】

Redux Toolkit導入前

```
export const increment = () => ({　
  type: "INCREMENT"　
})

export const decrement = () => ({
  type: "DECREMENT"
})
```

Redux Toolkitで書き直したもの

```
import { createAction } from '@reduxjs/toolkit';

const FEATURE = 'counter';
export const incremented = createAction(`${FEATURE}/increment`);
export const decremented = createAction(`${FEATURE}/decrement`);
```

### 【Reducer】

Redux Toolkit導入前

```
export const initialState = { count: 0 };

export const countReducer = (state = initialState, action) => {
  switch(action.type) {
    case 'INCREMENT' :
      return {
        ...state, count: state.count + 1
      };
    case 'DECREMENT':
      return {
        ...state, count: state.count -1
      }
    default: {
      return state;
    }
  }
}
```

Redux Toolkitで書き直したものです。
Switch文を書かずに、すっきり書けます。

```
import { createReducer } from '@reduxjs/toolkit';
import { incremented, decremented } from './counter-action';

export type CounterState = {
  count: number;
}

const initialState: CounterState = { count: 0 };

export const counterReducer = createReducer(initialState, {
  [incremented.type]: (state) => ({...state, count: state.count + 1}),
  [decremented.type]: (state) => ({...state, count: state.count - 1}),
})
```

上記を__createSlice__を使ってさらに短く書くと、以下のようになります。  
actionとreducerのロジックを統合したものを、__Slice__と呼びます。

構成にもよるかと思いますが、Sliceとは、__Store全体を構成する一部分のStore__を意味します。

例えば、ECサイトなどで考えると、User、Item、Cartなど、状態の内容や用途別に、State、Action Creator、Reducerを切り分けてまとめることで、コードの見通しを良くしてくれます。

createSlice関数は、State、Action Creator、Reducerをまとめて作成することが出来る関数です。即ち、上記で触れたActionsとReducerは、createSlice関数で生成することが可能です。

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

export type CounterState = {
  count: number;
}

const initialState: CounterState = { count: 0 };

export const counterSlice = createSlice({
  name: 'counter', // Sliceの名前
  initialState, // 初期State
  reducers: { // Reducer（＝StoreのStateに対して更新処理を定義する役割）
  　// 以下のKeyがAction Creatorの関数名＝Action Creatorが生成される。
  　// 以下コードでは第一引数に現在のStateのみ渡してますが、第二引数は渡されたactionを記述
    incremented: (state) => ({ ...state, count: state.count + 1 }),
    decremented: (state) => ({ ...state, count: state.count - 1 }),
  }
})
```

上記によって作成されたSliceは、以下のプロパティを持つオブジェクトとなります。

```
const hogeSlice = createSlice(/* ... */);

hogeSlice.name;
hogeSlice.reducer;
hogeSlice.actions;
```

### 【役割ごとに生成したReducerを結合してStoreを生成】

例えば、上記で触れたECサイトを開発する際に、User、Item、Cartなど、それぞれcreateSliceで作成したReducerは一つにまとめた上で、Storeを生成しなければなりません。その場合は、以下のような記述になるかと思います。

```
import { combineReducers } from "redux";
import { configureStore } from "@reduxjs/toolkit";

// createSliceで生成したReducer
import userReducer from "./user";
import itemReducer from "./item";
import cartReducer from "./cart";

// combineReducers関数でReducerを結合
const reducer = combineReducers({
  user: userReducer,
  item: itemReducer,
  cart: cartReducer
});

// configureStoreに結合したReducerを渡して、Storeを生成
const store = configureStore({ reducer });

export default store;
```

### 【トップレベル】

Redux Toolkit導入前

```
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import { initialState, reducer } from './Reducer/reducer';

const store = createStore(reducer, initialState);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);
```

Redux Toolkitで書き直したもの
createSlice関数で生成されたReducerを渡してます。

```
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { configureStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';
import store from './store'; // 結合したReducerが渡されているStore

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

```

### コンポーネント

Redux Toolkit導入前

```
import React from 'react';
import { increment, decrement } from 'Action/actionCreator';
import { useSelector, useDispatch } from 'react-redux';

function App() {

  const count = useSelector(state => state.count);
  const dispatch = useDispatch()

  return(
    <>
    <div>{count}</div>
    <button onClick={()=> dispatch(increment())}>click</button>
    <button onClick={()=> dispatch(decrement())}>click</button>
    </>
  )
}

export default App;
```

Redux Toolkitで書き直したもの

```
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { counterSlice } from 'features/counter/counter';

function App() {

  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();
  const { incremented, decremented } = counterSlice.actions;

  return(
    <>
    <div>{count}</div>
    <button onClick={()=> dispatch(incremented())}>click</button>
    <button onClick={()=> dispatch(decremented())}>click</button>
    </>
  )
}

export default App;
```

## まとめ

以上、簡単にですが、Redux Toolkitの紹介でした。
これは、沢山書いて、慣れるしかなさそう。。。


Redux ToolKit概要

## Reduxを導入して起こる作るファイルと記述の量が多い問題

Reduxを勉強し始めてまず感じたのは、定型構文が多く、作るファイルも記述も多い事。  
これは、実際に開発を進めるとチーム内で、共通のルールが無いとすぐにカオスな事になるなと感じました。調べたところ、その問題を解決するために、公式、非公式に、いくつかのデザインパターンが提唱されてきたようです。この記事では、その中でディレクトリ構成に絞ってまとめました。

## re-ducksパターンとは

開発対象の規模にもよるのかと思いますが、個人的には、re-ducksパターンが一番整理しやすいと感じました。ファイル管理をしやすくするためのReduxのディレクトリ構成で、Ducksパターンから派生したものです。

[re-ducks](https://github.com/alexnm/re-ducks)

## reduxのディレクトリ構成例

### redux-way
actionsとreducers、Reduxの役割別にディレクトリを分けて管理するパターン。  
action creators, action types,reducersは、密結合にも関わらず、異なるファイルに分割され、異なるディレクトリに分散しているため、関連性が掴みにくい構成になっている。(基本的には、同じ名前のファイルが複数作られる、かつ開発中に同じ名前のついたファイル間の移動が頻繁に起こることが予想されるため、自分が今どの役割のファイルを記述をしてるのか、混乱しやすいかも...)  

以下はsrcがルートとなります。
```
components
├ users.js
└ articles.js

containers
├ users.js
└ articles.js

actions
├ users.js
└ articles.js

reducers
├ users.js
└ articles.js

types
├ users.js
└ articles.js
```

### Ducksパターン
機能ごとに分割し、一つのファイル内に、actions、types、reducersなど必要な記述を全て行う。機能単位で管理するので、上記のディレクトリ構造と異なり、１ファイルを参照、または変更すれば良いというシンプルな構成。  
action creators, action types,reducersの定義が１ファイルに記述するので、見通しが良くなる。  

しかし、デメリットもあって、１ファイル内に必要な記述を書いてくので、開発が進むにつれて、ファイルが肥大化しやすく、閲覧性が悪くなる。

```
components
├ users.js
└ articles.js

containers
├ users.js
└ articles.js

modulues
├ users.js
└ articles.js
```

### re-ducksパターン
usersやarticles単位でディレクトリを切って、その中に必要なファイルを分割して定義する。 __Ducksパターンの１機能に１ファイルでなく、１機能に１ディレクトリという点が異なる。__

密結合なファイル群が同一のディレクトリに束ねられ、ファイルごとの役割が明確になり、管理しやすくなる点がメリットとして挙げられる。

```
components
├ users.js
└ articles.js

containers
├ users.js
└ articles.js

users
├ actions.js
├ index.js
├ operations.js
├ reducers.js
├ selectors.js
└ type.js

articles
├ actions.js
├ index.js
├ operations.js
├ reducers.js
├ selectors.js
└ type.js
```

## re-ducksパターンに登場する各ファイルの役割

### operations
複雑な処理を書くファイルで、redux-thunk等で非同期処理を制御するようなActionは全てこのファイルに書くことになっています。

そして、最後に__Action__をdispatchするようになっています。
コンポーネントからActionを発行する際は、必ずoperationsファイルを経由する決まりがあります。  

↓例えば、SignInの処理を書いた場合  
```
import { signInAction } from './actions';
import { push } from 'connected-react-router';

export const signIn = () => {
  return async (dispatch, getState) => {
    const state = getState();
    const isSignedIn = state.users.isSignedIn;

    if(!isSignedIn) {
      const url = 'https://******';
      const response = await fetch(url).then(res => res.json()).catch(()=> null);

      const username = response.login;
      console.log(username);

      dispatch(signInAction({
        isSignedIn: true,
        uid: uid,
        username: username
      }))

      dispatch(push('/'))
    }
  }
}
```

### types
TypeScriptを導入してる場合は、型定義はこのファイルで行います。

```
export interface ArticleState {
  title: string
  body: string
}
```

### selectors
Storeで管理しているstateを参照する関数を提供します。
reselectというnpmモジュールを使います。

```
import { createSelector } from "reselect";

const usersSelector = (state) => state.users;

export const getUserId = createSelectore(
  [usersSelector],
  state => state.uid
);
```

### Appコンポーネント

上記のselectorsファイル内で定義した関数をimportして使います。

useSelectorを使用して、Store内のstateを取得し、selectorsからimportした関数の引数に渡してあげます。

```
import React from "react";
import {useSelector} from "react-redux";
import {getUserId} from "re-ducks/users/selectors"

const App = () => {
    const selector = useSelector(state => state)
    const uid = getUserId(selector)
    const username = getUserName(selector)

    return(
         <div>ユーザーIDは{uid}</div>
         <div>ユーザー名は{username}</div>
    )
}

export default App
```

各役割については、こういうものだという事は分かったが、これは実際に何度か書いて、理解を深めないとなかなか難しい印象。。。規模の大きい開発では、re-ducksを徐々に取り入れてくか、初めから意識しておいた方が良さそうな印象です。

Redux導入時のディレクトリ構成例

## Reduxを使用する中で登場する用語の整理
まず用語の整理から

__State__
アプリケーションの状態です。

__Store__
Stateの状態を保持している場所

__Action__
ユーザーがアプリケーションで何をしたいかという情報を持つプレーンなオブジェクト

__Reducer__
発行されたActionを元にStateを更新する副作用の無いメソッド

## Reduxの流れ
整理する意味でも図化してみました。

![reduxFlow](//images.ctfassets.net/gtzwy9itrek0/7pI4XGAOyG7l5JC4tIaCYI/288225db8ef2631329add49c92efcf91/Reduxflow.png)

## ユーザーがアプリケーション上で何らかの操作をし、actionが発行される

ユーザーの操作によって、コンポーネントから、Actionが生成されます。
後述しますが、コンポーネント上で、この定義ファイルをimportして利用することで、コンポーネントからActionの作成依頼をかけられます。

Actionというディレクトリを切って、そこにActionを発行するメソッドを定義しておきます。
以下は __Action Creator__ と呼ばれるものです。dispatchする時に生の値を渡すのでなく、Action Createrの関数の戻り値を使うことが多いようです。これは、バグを防ぐために有効です。

[Redux StyleGuide](https://redux.js.org/style-guide/style-guide/#use-action-creators)

```
//Actionはどんなイベントが起こったかを表現するプレーンなオブジェクトです

export const increment = () => {
  return {
    type: "INCREMENT"
  }
}

export const decrement = () => {
  return {
    type: "DECREMENT"
  }
}
```

actionをdispatchする際は、生の値を渡すのでなく、Action Creatorの戻り値を使う方が安全です。
*以下のように生の値を渡さない。

```
<button onClick={()=> dispatch({type: "INCREMENT"})}>click</button>
<button onClick={()=> dispatch({type: "DECREMENT"})}>click</button>
```

Action Creator関数の戻り値を使いましょう。 

```
<button onClick={()=> dispatch(increment())}>click</button>
<button onClick={()=> dispatch(decrement())}>click</button>
```

## 発行されたactionをdispatchする

Actionは、dispatchしないと、Store内の値を変更することはできません。
コンポーネント内で、Actionをimportして、ActionをDispatchしましょう。

(※Classコンポーネントが主流だった時代は、connect関数が利用されていたようですが、現在は、__useSelector__　と　__useDispatch__　でReactとReduxの接続が可能なので、こちらを積極的に使っていった方が良さそうです)

useSelectorを使って、Storeからstate(値)を取得し、useDispatchにAction Creatorを渡して、ActionをDispatchします。

```
import React from 'react';
import { increment, decrement } from 'Action/actionCreator';
import { useSelector, useDispatch } from 'react-redux';

function App() {

  const count = useSelector(state => state.count);
  const dispatch = useDispatch()

  return(
    <>
    <div>{count}</div>
    <button onClick={()=> dispatch(increment())}>click</button>
    <button onClick={()=> dispatch(decrement())}>click</button>
    </>
  )
}

export default App;
```

## DispatchされたActionによってReducerでStateを更新する

ここでは、Reducerディレクトリを切って、reducer.jsに以下の記述を書いています。
Reducerの関数は二つ引数をとります。第一引数にstate、第二引数にはactionがreturnした値をとります。(typeとpayload)

第一引数のstateですが、基本的には現在の引数の状態を受け取るようになっていますが、もし現在のstateの状態が指定されていない場合は、デフォルトの値をstateの引数に持たせるようにします。

```
export const initialState = { count: 0 };

export const countReducer = (state = initialState.count, action) => {
  switch(action.type) {
    case 'INCREMENT':
      return {
        ...state, count: state.count + 1
      };
    case 'DECREMENT':
      return {
        ...state, count: state.count - 1
      }
    default: {
      return state;
    } 
  }
}
```

## Storeを作成してpropsとして渡す

Reducerが作成できたら、Reduxの核となるStoreを初期化して、Propsとして渡しましょう。
Storeは１アプリケーションにつき、一つです。引数には、reducerと初期値を渡します。

```
const store = createStore(reducer, initialState);
```

最後にStoreを最上位のコンポーネントでProviderを使って、Storeをpropsとして渡します。これで初めて、子孫コンポーネントの中でReduxの機能が使えるようになります。

```
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import { initialState, reducer } from './Reducer/reducer';

const store = createStore(reducer, initialState);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

```

## 更新されたStateがコンポーネントでレンダリングされる

上述の __useSelector__ と __useDispatch__　によってReactとReduxの接続は実現できています。ユーザーのアクション(ボタンのクリックなど)の応答として、更新された値が表示されます。


Reduxの記述する手順を整理しながら、簡単な処理を書いてみた。

Reactでコンポーネントをimportする時などに、いちいち相対パスで書くのは面倒。
そんな時は、絶対パスで書けるように設定しておきましょう。

```javascript
import Button from '../../components/atom/Button'
```

↓

```javascript
import Button from 'components/atom/Button'
```

## 設定

非常に簡単です。プロジェクトのルートに __jsconfig.json__ 又は、 __tsconfig.json__　を作成して、以下を追記するのみです。

```javascript
{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}
```

これでいちいち相対パスで書くストレスから開放されます。

[Create React App Document](https://create-react-app.dev/docs/importing-a-component/#absolute-imports)

Reactでimportする際に絶対パスで書くときの設定

Reactでは、コンポーネントの状態(State)が個別に扱われていますが、ログイン機能など、アプリケーション内でグローバルに持たせたいStateもあります。そういったケースでグローバルなStateを管理する機能を提供するのがReduxです。ReduxはFacebook社が提唱するFluxアーキテクチャに影響を受けています。

## Reduxの３つの原則

__<値の保管場所は一つだけ>__  
すべてのデータは「ストア」と呼ばれるところに保管されます。これは、アプリケーションごとに一つだけ用意しておき、すべての値はこの「Store」の中で保持されます。Storeが一つのオブジェクトに集約されてるので、デバッグもしやすくなります。

__<値は読み取り専用>__  
「ストア」に用意されている値は、参照だけ可能で、変更は許可されていません。
変更する手段は、どんなイベントが起こったかを表現するActionのみです。

__<変更は別途、関数で行う>__  
値を作成し直す純粋関数を用意することで、ストアの更新が可能となります。
FluxアーキテクチャのStoreにあるStateを変更する責務を切り出したものとして、Reducerという副作用の無い関数で行ます。前の状態とActionを引数にとって、新たなStateを返します。

Reducerを抽象化すると以下の式で表現されます。  
PrevState(値の前の状態)とActionを引数にとって、新たなStateを返します。

```
(prevState, action) => newState
```

## そもそも何故Reduxを使うのか？

色々と意見があるかと思いますが、Stateの見通しを良くし、どこからでもグローバルなStateを参照/変更可能にするためと考えています。

ReactのみでStateを管理しようとすると、Prop drilling問題と呼ばれる、Stateのバケツリレーが親コンポーネントから子孫コンポーネントの間で発生します。これは、コンポーネントの階層が深くなってくると表出する問題で、コンポーネント間でStateを渡すためのデータ受け渡しのインターフェースを余計に作らなければいけないコストが発生します。

Reactのコンポーネント内のみで、Stateを管理するのに比べ、Reduxを導入するとアプリケーション内で、Globalに一つ用意されたStoreでStateを管理することができます。そしてStore内のStateを更新したい場合、決められた手続きを踏めば、どのコンポーネントからでも、Stateを変更できることが出来るようになります。また、モジュールの疎結合も実現出来るようになるという点が、Reduxを導入する理由になるかと思います。

## Reduxに影響を与えたFluxアーキテクチャとは

![FluxPattern](//images.ctfassets.net/gtzwy9itrek0/7yYz4KLh3GRKQehbAhXWoX/c413b1f8536467a374e576458daa16d1/flux-simple-f8-diagram-with-client-action-1300w.png)
参照元：[Flux In-Depth Overview](https://facebook.github.io/flux/docs/in-depth-overview)

Fluxは単方向データフローを実現するためのフロントエンドのアーキテクチャです。
登場する用語として以下が挙げられます。

__Store__
アプリケーション全体で参照したいデータの保管場所

__Action__
イベントにおける『対象のデータをどうしたいか』を表現したもの

__Dispatcher__
Actionの種類を判別し、紐づいたStoreの更新処理を行うもの

ざっくりですが、以下のようなフローで単方向データフローの中で値の更新処理を行ます。

① 『対象のデータをどうしたいか』という意図を表現したオブジェクト(Action)を、Dispatcherに対して、発行する。

② DispatcherがActionの種類を判別し、それに対応する手順に従って Storeの値の状態を変更する。

③ Storeが書き換えられて、View（コンポーネント）に反映される。

処理の流れは上記図の通りです。Fluxは、__単方向データフローを徹底__することで、破綻しにくく予測可能な状態でアプリケーション開発が進められることを目指したものです。

## Reduxで用意するもの

__Store__  
値を保管しておくものです。ここに保管される値は「ステート」と呼ばれます。

__Provider__  
ストアを他のコンポーネントに受け渡すための仕組みです。

__Reducer__  
ストアに保管される「ステート(値)」を変更するための仕組みです。

__ReducerはFluxでなく、Reduxで登場するモジュール__ です。  
FluxのStoreの中に保管されているStateの変更をする責務を切り出し、DispatcherとStoreの相互依存を解決し、従来のFluxパターンをよりシンプルに書けるようにしています。
Reducerで呼び出す処理は常に、新しいステート(値)を最後に返すことを覚えておきましょう。

## 具体的な手順

### ① Actionの作成

Actionはどんなイベントが起こったかを表現するプレーンなオブジェクトです。

```
export const increment = () => {
  return {
    type: "INCREMENT"
  }
}

export const decrement = () => {
  return {
    type: "DECREMENT"
  }
}
```

### ② Reducerの作成
Reducerは副作用のない純粋関数です。  
PrevState(値の前の状態)とActionを引数にとって、新たなStateを返します。

```
const reducer = (state, action) => {
  ///何らかの処理
}
```

__第一引数のstate__には、Storeに保管するState(値)を指定します。これは整数やテキスト、複数の値を扱いたい場合はオブジェクトを用意します。

__第二引数のAction__は、Reducerを実行する際に渡される値です。これはReducerが実行される時の内容をまとめたプレーンなオブジェクトです。  
Reducer内では、要件によって、さまざまな処理を記述することになるのですが、この引数のアクションを使って、どのような処理を行うかを定義していきます。（簡単な例だと、increment,decrement,resetなど...）

必ず用意されるのは、「__type__」というプロパティで、これは、呼び出し時のactionの種類を示す値になっています。レデューサーは、typeを使い、「このtypeの時は、この処理。このtypeはあの処理。。。」と処理を振り分けていきます。

```
//Reducer
const counter_reducer = (state = state_value, action) => {
  switch(action.type) {
    case 'INCREMENT':
      return{
        counter: state.counter + 1,
        message: 'INCREMENT'
      }
    case 'DECREMENT':
      return {
        counter: state.counter - 1,
        message: 'DECREMENT'
      }
    default:
      return state;
  }
}
```

そして、新たにStoreに保管するState(値)を用意して、それをreturnすると、StoreのなかのState(値)が、更新されます。

reducer関数の決まりとして、以下の３点は覚えておきましょう。

1.引数はstateとactionの二つ  
2.actionは、typeでstateをどう変更させるかを指定する  
3.戻り値は、変更後のstate  

### ③ ストアを作成する

Reducerが用意できたら、Reduxの核となるStoreを作成します。
改めて書くと、ストアは一つのアプリケーションにつき、一つのみです。

```
const store = createStore(reducer, initialState);
```

### ④ Providerを使って、storeをpropsとして渡す
そして初期化したStoreを最上位のコンポーネントでProviderを使って、propsとして渡す必要があります。これによって、初めて子コンポーネントの中で、Reduxの提供する機能が使えるようになります。これで複数の子コンポーネントからも、Storeの値にアクセスできるようになります。これはお約束事です。

```
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import { reducer, initialState } from 'reducer';
import App from './App';

const store = createStore(reducer, initialState);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);
```

上記を用意して初めて、Reduxを利用する準備が整います。  
コンポーネントに、Actionをインポートして、viewから発行したactionはdispatcherによって、Reducerに渡されます。  

```
function App() {

  const count = useSelector(state => state.count);
  const dispatch = useDispatch()

  return(
    <>
    <div>{count}</div>
    <button onClick={()=> dispatch(increment())}>click</button>
    <button onClick={()=> dispatch(decrement())}>click</button>
    </>
  )
}
```

Reduxを導入すると多くのファイルを作成する事になります。実際には、『Duck』や『re-ducsk』パターンを取り入れながら開発が進むことになると思います。  

簡単にReduxのディレクトリ構成の例も書いてみたので、興味があったら参照してみて下さい。  
[Redux導入時のディレクトリ構成例](https://memo-cached.vercel.app/posts/re-ducks)

Reduxの原則

Reactで基本的なフォームを作る際のパターンを紹介していきます。

## テキスト
まずは、基本的なテキスト入力フォームからです。
これは、入力値を保管するstateと、onChangeでstateを更新するイベントハンドラを組み合わせて実装できます。

```javascript
  const [name, setName] = useState('Taro');
  const [age, setAge] = useState('20')

  const handleChangeName = e => setName(e.target.value);
  const handleChangeAge = e => setAge(e.target.value);
    return(
      <>
        <h1>My Name is {name}. I'm {age} years old.</h1>
        <input type="text" value={name} placeholder="Input your name" onChange={handleChangeName}/>
        <input type="text" value={age} placeholder="Input your age" onChange={handleChangeAge}/>
      </>
    )  
```

## ラジオボタン
ラジオボタンの実装はcheckedの値を明示的に判定することが必要です。

```javascript
  const [value, setValue] = useState('rock');
  const handleChange = e => setValue(e.target.value);

  return(
    <>
      <h1>Your Favorite Genre</h1>
      <p>I like {value}.</p>

      <label htmlFor="rock">
        Rock
        <input
          id="rock"
          type="radio"
          value="rock"
          onChange={handleChange}
          checked={value === 'rock'}
          />
      </label>

      <label htmlFor="jazz">
        Jazz
        <input
          id="jazz"
          type="radio"
          value="jazz"
          onChange={handleChange}
          checked={value === 'jazz'}
          />
      </label>

      <label htmlFor="classic">
        Classic
        <input
          id="classic"
          type="radio"
          value="classic"
          onChange={handleChange}
          checked={value === 'classic'}
          />
      </label>
    </>
```

## チェックボックス
チェックボックスは、複数選択になるので、配列で保持する形が良いと思います。
chekedの判定は、[includes](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)メソッドで行ます。

values配列に、すでに値が含まれていた場合は、イベントが発火した際は、OFFにしたと判断し、イベントの発行元の値を取り除いた配列を作り直し、そうで無い場合は、ONにしたと判断し、イベント発行元の値を末尾に追加した配列を作り直します。

```javascript
  const [value, setValue] = useState(['javascript']);

  const handleChange = e => {
    if (value.includes(e.target.value)) {
      setValue(value.filter(item => item !== e.target.value));
    } else {
      setValue([...value, e.target.value]);
    }
  }

  return(
    <>
      <h1>Your Favaorite Language</h1>
      <p>I like {value.join(', ')}</p>

      <label htmlFor="php">
        PHP
        <input 
          id="php"
          type="checkbox"
          value="php"
          onChange={handleChange}
          checked={value.includes('php')}
        />
      </label>

      <label htmlFor="golang">
        GO
        <input 
          id="golang"
          type="checkbox"
          value="golang"
          onChange={handleChange}
          checked={value.includes('golang')}
        />
      </label>

      <label htmlFor="javascript">
        JavaScript
        <input 
          id="javascript"
          type="checkbox"
          value="javascript"
          onChange={handleChange}
          checked={value.includes('javascript')}
        />
      </label>

    </>
  )
```

## セレクトボックス
セレクトボックスは、以下のように セレクトタグのvalueに値を指定します。

```
  const [value, setValue] = useState('beer');
  const handleChange = e => setValue(e.target.value);

  return(
    <>
      <h1>Your Favaorite Liquor</h1>
      <p>I like {value}</p>
      <select value={value} onChange={handleChange}>
        <option value="beer">Beer</option>
        <option value="wine">Wine</option>
        <option value="whisky">Whisky</option>
      </select>
    </>
  )
```

以下に動作するものを貼っておきます。

<div class="codepen">
<iframe class="cp_embed_iframe " frameborder="0" height="400" style="width: 100%;" scrolling="no" title="qbGWKE" src="https://codepen.io/tomiyama05/embed/preview/vYGPpLW?height=265&theme-id=dark&default-tab=js,result" frameborder="no" loading="lazy">
</iframe>
</div>

Formに入力した値を元にAPI用に変換したり、アプリケーション内で持ちたい形に変換したいケースなど、実際には色々と面倒そうな場面が想定されますが、以上、基本的なフォームの作り方となります。


Reactで作るフォームの基本

## そもそもSPAにおけるルーティングとは？
通常のMVCで作られたサーバーサイドWebアプリケーションで、ルーティングとは何かと問われたら、__リクエストされたURLに対して、そのURLに紐づくページをアプリケーションサーバーが、クライアントに返す事__ という答えになるかと思いますが、SPAでのルーティングは、解釈が異なります。

SPAは、サーバーへの初回リクエストに対して、そのURLに関わらず、アプリ全体が記述されたJSのコードとアセットファイルがごそっと返されます。以降、アプリ内部でのページ遷移は、アプリが動的にDOMを書き換えることにより、移動してるように見せてるだけである点が、大きな特徴です。これは、ブラウザのアドレスバーのURLが書き換わっても、その処理もブラウザの中で完結しており、実際にサーバーへリクエストを飛ばすことは原則的に無いという事です。

では、サーバーにリクエストを送る事なく、ルーティングを実現するために、どうしてるか？これは、History APIという技術が使われています。HTML5から導入された__pushState()__ と__replaceState()__　で、ブラウザのセッション履歴に任意のURLを追加したり、特定の履歴を書き換えたりしながら、JSで履歴のURLを制御することを可能にしています。

詳しくは、[MDNのドキュメント](https://developer.mozilla.org/ja/docs/Web/API/History_API "History API")へ。(時間のある時に一読しておくことをお奨めします)

以上の事から、SPAのルーティングとは？という問いに対しては、以下の解釈が妥当になるかと思います。

> SPAにおけるルーティングとは、『DOMの動的な書き換えによってページ遷移を擬似的に実現するとともに、ブラウザのセッション履歴をそれに同期させる事』

...と言えます。

SPAでのルーティングの適用単位は、コンポーネントです。LaravelやRailsだと、ひとつのURLに対応するのはControllerで、それがviewを経由して、ページ全体を描画するが、Reactは、ルートのコンポーネントから階層を下り、ここから先はこのコンポーネントがマウントされる、このパスの時には別のコンポーネントがマウントされるといったように、コンポーネントそのものがルーティングとなります。

その他、開発時に考慮しなければいけない前提として、以下が挙げられます。

サーバーへリクエストを投げないということは...

① サーバー側から、クライアントがどんなページを見てるか、どう移動したかは分からない。これはアクセス解析時にネックとなる。(これは、ルーティングが実行されてURLが書き換わる際に、Effect HookでGAにリクエストを発行する処理を挟むことで対処できる)

② HTTPステータスコードを返せない。

③ pushStateを使ったルーティングでは、 履歴が変わって、新しいページがレンダリングされても、スクロール位置は遷移前のままとなる。(サーバーサイドであれば、ページ遷移すれば、毎回トップ位置から表示される)この場合、以下のようなコードを書いて対処する必要がある。

```
const {hash, pathname} = useLocation();
const {action} = useHistory();

useEffect(()=> {
    if (!hash || action !== 'POP') {
      window.scrollTop(0,0);
    } 
  }, [action, hash, pathname])

```


『サーバーサイドWebアプリ』と『SPA』のルーティングの違い

TypeScriptを導入して、useStateを書く際には、stateの型が推論できるかに注意を払う必要があります。ありがちな問題として、外部APIにリクエストして、ユーザー情報を取得し、そのオブジェクトを入れる場合、初期値として渡せるような型を持つデータがない問題が起こります。

この場合は、型推論に頼らず、useStateに明示的に型引数を渡す必要があります。

```
const [user, setUser] = useState<User>()
const [article, setArticle] = useState<Article[]>([]);
```

初期値に明示的にnullを入れたい場合は、以下の通り

```
useState<User | null>(null)
```

TypeScriptでuseStateを使用する際に注意すべき型推論

## Nullish Coalescing

以下は、等価です。
Optionalなプロパティで値が省略されるケースに適用する際に短く書けます。

```
<div>
{ person.age ? person.age : '???' }
</div>

<div>
{ person.age ?? '???' }
</div>
```