JavaScript/Redux の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• JavaScript/Redux へ行く。
• JavaScript/Redux の差分を削除

#author("2019-10-14T00:43:13+00:00","default:wikiadmin","wikiadmin")
#author("2019-10-18T11:11:02+00:00","default:wikiadmin","wikiadmin")
-よくわからん

#contents

*各機能の役割 [#x14d3cd9]

|Action|単純なオブジェクト|
|Reducer|Actionの結果をもとにstateを更新（新しいstateに置き換え)|
|State|stateをpropに渡して、コンポーネント描写|
|Store|アプリで唯一全てのstateを包括する。これを変えるにはactionをdispatchする。大きくなってきたらreducer分割で対応せよ|

*勉強 [#k7e10f35]

https://qiita.com/tomzoh/items/7fabe7cb57dd96425867

https://qiita.com/takayuki-ochiai/items/d2fd896627ecf0b466be

https://qiita.com/jabba/items/5ebea8d19809a4e0f8c6

https://super-yusuke.gitbook.io/udemy-course/meteno-react-app/react-dearwosuru

*github [#l89f3cb8]

 https://github.com/reduxjs/redux/

 https://github.com/react-samples/react-redux-tutorial 

 https://github.com/teradonburi/muiReduxForm

*よく使うJSの構文 [#qf0dd58b]

スプレッド演算子、filter,map

**関数の省略 [#acb58cea]

 const middlware = function ({getState, dispatch}) {
    return function(next) {
      return function(action) {
        next(action) 
     }
   }
 }

これが

 const myMiddlware = ({ getState, dispatch }) => next => action => {
     next(action)
 };

*構成要素 [#wd0f6ca8]

|Store|状態の親玉。でっかいJSONイメージ。subscribeメソッドを実装すると変更検知ができる。dispatchもstoreから行う|
|Action|名前であるTYPEと中身データのpayloadを持つ。Storeを変えたければActionをコールするところから始まる。 以下のオブジェクトがAction { type : "HOGE_ACTION"}|
|ActionCreator|Actionオブジェクトを返す関数|
|Reducer|以前の状態とActionを組み合わせて、新しいStateを作り出す|
|Router|パスとコンポーネントを結びつける|

Router(パスへの追加)→connectでつないだコンポーネント→

*mapStateToProps mapDespatchToProps [#h361a76c]

reduxのstateをreactのpropsに変換するのと、Actionもpropsにマッピングする。
第一引数が、stateToPropで第二引数がActionToPropである。繋ぐのはconnect関数。


|mapStateToProps|stateを引数にとってオブジェクトを返す|
|mapDespatchToProps|dispatchを引数にとって、dispatchする複数の関数を返す|

 const { testFunction,todos } = props
 testFuctionでアクションを呼べる。上の宣言なしだとthis.props.testFunction
 todosでpropsを呼べる。this.props.todos

**シンプルに記載 [#a8fdd028]

 import { connect } from 'react-redux'
 import MyComponent from './my-component'
 import { actionCreatorA, actionCreatorB } from './my-module'
 export default connect(
  ({users, todos}) => ({users, todos}),
  {
    actionCreatorA,
    actionCreatorB
  }
 )(MyComponent)

**Action [#i9b2fd0a]

**Reducer [#j1c94a95]

--「Reducer」は状態とアクションを受けて、新しい状態を返す関数である。
--FLUXとの相違点はReduxにはdispatcherがない。(Reducerで担う)

**State [#b7f70bec]



*ツール [#baf48dcb]

react developer tools(ReactのページでElementタブの右端に出てくる)


*参考サイト [#w96305db]

http://numb86-tech.hatenablog.com/entry/2016/11/20/124316
https://blog.mismithportfolio.com/web/20161107reactrouter

*その他 [#ud04f5d5]

-axios Promise(thenで成功、失敗処理を記載）対応のHTTPクライアント
-babel トランスパイラ
-express
-react-router-redux
-redux-actions

#counter