Redux私的まとめ

#Reduxの構成
以下の4つ

- Action
- Action creator
- Reducer
- Store

##Action
アプリからの情報をstoreに送るためのオブジェクト
ActionがStoreに送られるとStoreは新しいstateを作り、それを元にViewが更新される

オブジェクトは以下のプロパティは以下のプロパティをもつ
typeプロパティは必須でその他はオプション

|プロパティ||
|---|---|
|payload|Actionに伴うデータとして利用可可能|
|error|エラーを表現するにはtrueにする。|
|meta|他の情報を書く|

##Action creator
その名の通り
##Reducer
送られてきたActionと元のstateを元に新しいstateを返す
##Store
アプリに1つのみ
stateを保持してActionがdispatchされるとReducerを読んで処理する

#TODOアプリを作る
[こちらの書籍](https://www.amazon.co.jp/React%E5%85%A5%E9%96%80-React%E3%83%BBRedux%E3%81%AE%E5%B0%8E%E5%85%A5%E3%81%8B%E3%82%89%E3%82%B5%E3%83%BC%E3%83%90%E3%82%B5%E3%82%A4%E3%83%89%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%AB%E3%82%88%E3%82%8BUX%E3%81%AE%E5%90%91%E4%B8%8A%E3%81%BE%E3%81%A7-%E7%A9%B4%E4%BA%95%E5%AE%8F%E5%B9%B8-ebook/dp/B078XDLL2J/ref=tmm_kin_swatch_0?_encoding=UTF8&qid=&sr=)を参考にReduxのみで作る

##Reducreの定義
ReducerはStoreが保持している状態を変化させる純粋関数
Storeの初期状態は以下

```javascript
const initialState={
 tasks:[]
}
```
引用：[React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで](https://www.amazon.co.jp/React%E5%85%A5%E9%96%80-React%E3%83%BBRedux%E3%81%AE%E5%B0%8E%E5%85%A5%E3%81%8B%E3%82%89%E3%82%B5%E3%83%BC%E3%83%90%E3%82%B5%E3%82%A4%E3%83%89%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%AB%E3%82%88%E3%82%8BUX%E3%81%AE%E5%90%91%E4%B8%8A%E3%81%BE%E3%81%A7-%E7%A9%B4%E4%BA%95%E5%AE%8F%E5%B9%B8-ebook/dp/B078XDLL2J/ref=tmm_kin_swatch_0?_encoding=UTF8&qid=&sr=)

Reducerは以下のように定義

```javascript
function tasksReducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_TASK':
      return (
        ...state,
        tasks: state.tasks.concat([action.task])
            )
    default:
      return state;
  }
}
```
引用：[React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで](https://www.amazon.co.jp/React%E5%85%A5%E9%96%80-React%E3%83%BBRedux%E3%81%AE%E5%B0%8E%E5%85%A5%E3%81%8B%E3%82%89%E3%82%B5%E3%83%BC%E3%83%90%E3%82%B5%E3%82%A4%E3%83%89%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%AB%E3%82%88%E3%82%8BUX%E3%81%AE%E5%90%91%E4%B8%8A%E3%81%BE%E3%81%A7-%E7%A9%B4%E4%BA%95%E5%AE%8F%E5%B9%B8-ebook/dp/B078XDLL2J/ref=tmm_kin_swatch_0?_encoding=UTF8&qid=&sr=)

|Reducerの引数|説明|
|---|---|
|第1|stateオブジェクト。|
|第2|Actionオブジェクト。どんな操作をしたのかを示す|
##Actioncreatorの定義
```javascript
const addTask = (task) => ({
  type: 'ADD_TASK',
  payload: {
    task
  }
})
```
Actionオブジェクトを返すだけの関数
オブジェクトを返すから()でくくられている

ActionはActionCreatorで作る

##Store生成
StoreはcreateStoreで生成する

```javascript
createStore(reducer,[preloadedState],[enhancer])
```
|引数|説明|
|---|---|
|第1|Reducerを渡す|
|第2|Storeの初期値|
|第3|サドパツール|
さっき作ったtaskReducerを渡してStoreが作成される。

そうして作られてたStoreは4つのメソッドを持つオブジェクトをもっている

- dispatch
- subscribe
- getState
- replaceReducer


dispatchででActionの発行をする、発行って書いてあるけど送信じゃね？わかりやすいの普通そっちだと思う

```javascript
const addTask = (task) => ({
    type: 'ADD_TASK',
    payload: {
        task
    }
})

const store = createStore(tasksReducer)

store.dispatch(addTask(addTask('TASK')))
```

ActionはActionCreatorで作る

ADD_TASKというtypeのActionがReducerに送信されて状態が変化する
getStateでStoreの状態を見れる

subscribeメソッドを使うとStoreの状態が変更されたたときに呼ばれるコールバック関数を設置できる。言い換えるとdispatchでStoreの状態が変化したときにその変化を監視する役割

最後にreplaceReducer
通常createStoreでStoreを生成する場合、関連付けられるReducerは1つ
Reducerは分割できるひとまとめにするメソッドもあるが分割してそれを動的にロードするならStoreに関連付けているReducerを他のReducerに差し替える必要があるハイここまで何言ってるかわかりません

そんなときにreplaceReducerhが役立つ

とりあえずタスクを追加するReducerと消すそれをつくる

```javascript
import { createStore, relpaceReducer } from 'redux'

const initialState = {
    tasks: []
}

function addReducer(state = initialState, action) {
    switch (action.type) {
        case 'ADD_TASK':
            return {
                ...state,
                tasks: state.tasks.concat([action.payload.task])
            }
        default:
            return state;
    }
}

function resetReducer(state = initialState, action) {
    switch (action.type) {
        case 'RESET_TASK':
            return {
                ...state,
                tasks: []
            }
        default:
            return state;
    }
}
```
引用：[React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで](https://www.amazon.co.jp/React%E5%85%A5%E9%96%80-React%E3%83%BBRedux%E3%81%AE%E5%B0%8E%E5%85%A5%E3%81%8B%E3%82%89%E3%82%B5%E3%83%BC%E3%83%90%E3%82%B5%E3%82%A4%E3%83%89%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%AB%E3%82%88%E3%82%8BUX%E3%81%AE%E5%90%91%E4%B8%8A%E3%81%BE%E3%81%A7-%E7%A9%B4%E4%BA%95%E5%AE%8F%E5%B9%B8-ebook/dp/B078XDLL2J/ref=tmm_kin_swatch_0?_encoding=UTF8&qid=&sr=)

追加は今まで通り、リセットは空の配列にしただけ

今回はここまでにして最後に下の参考書を読んだ感想をいいます。
[React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで](https://www.amazon.co.jp/React%E5%85%A5%E9%96%80-React%E3%83%BBRedux%E3%81%AE%E5%B0%8E%E5%85%A5%E3%81%8B%E3%82%89%E3%82%B5%E3%83%BC%E3%83%90%E3%82%B5%E3%82%A4%E3%83%89%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%AB%E3%82%88%E3%82%8BUX%E3%81%AE%E5%90%91%E4%B8%8A%E3%81%BE%E3%81%A7-%E7%A9%B4%E4%BA%95%E5%AE%8F%E5%B9%B8-ebook/dp/B078XDLL2J/ref=tmm_kin_swatch_0?_encoding=UTF8&qid=&sr=)

この参考書まじで打ち間違い多いし、入門者向けとは思えないほど説明不足&説明下手で買って損した。読んで悩んだ時間が無駄だった



#参考
- [React + Redux の基本的な使い方](https://kde.hateblo.jp/entry/2019/02/12/023325#Redux%E3%81%A8%E3%81%AF)
- [React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで](https://www.amazon.co.jp/React%E5%85%A5%E9%96%80-React%E3%83%BBRedux%E3%81%AE%E5%B0%8E%E5%85%A5%E3%81%8B%E3%82%89%E3%82%B5%E3%83%BC%E3%83%90%E3%82%B5%E3%82%A4%E3%83%89%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%AB%E3%82%88%E3%82%8BUX%E3%81%AE%E5%90%91%E4%B8%8A%E3%81%BE%E3%81%A7-%E7%A9%B4%E4%BA%95%E5%AE%8F%E5%B9%B8-ebook/dp/B078XDLL2J/ref=tmm_kin_swatch_0?_encoding=UTF8&qid=&sr=)