reduxの理解の仕方。

redux難しいなって思ってたけど実はそうでもなかった。

公式のcounter-vanillaが一番わかりやすかった。

github.com

一番重要なことはここの画像をお借りしたい

f:id:devilmakelie:20180416113124p:plain

(state,action) => state

大切なのはコレ。

stateとactionで新しいstateを作って
新たなstateで描画し直す。

これを行うためのフレームワークだった。

画にするとこんな感じ。

f:id:devilmakelie:20180416115700j:plain

これを書いて理解するために何度も言うようだが公式のcounter-vanillaが最もわかりやすかった。

自分なりにコメントを入れたのでよかったら参考にしてほしい。

<!DOCTYPE html>
<html>
<head>
  <title>basic example</title>
  //reduxの読み込み
  <script src = "https://unpkg.com/redux@latest/dist/redux.min.js"></script>
</head>
<body>
  <div>
    <p>
      Clicked:<span id = 'value'>0</span>times
      <button id = 'increment'>+</button>
      <button id = 'decrement'>-</button>
      <button id = 'incrementIfOdd'>Increment if odd</button>
      <button id = 'incrementAsync'>Increment async</button>
    </p>
  </div>
  <script>

  //reducerの作成　actionの登録。
  //(state,action)=>(state)の形で返すための1歩目
    function reducer(state,action){
      //stateの初期値を設定する
      if(typeof state === 'undefined'){
        return 0
      }
      switch(action.type){
        case 'INCREMENT':
          return state +1
        case 'DECREMENT':
          return state -1
        default:
          return state
      }
    }

//(state,action)=>(state)の2歩目
//storeの作成。stateをファイルから分離させて別のところにする作業

    var store = Redux.createStore(reducer)

    var valueEl = document.getElementById('value')

    function render(){
      valueEl.innerHTML = store.getState().toString()
    }
    render()

//reduxにrenderを登録する。難しい理論はリンクに掲載してある。
//これで"dispatch"関数が実行されたら返り値に応じてrenderされるようになる。

    store.subscribe(render)

//actionの作成
//これはSQLで言うところのクエリの発行。"dispatch"関数によってクエリを発行し、
//戻って来た値でrenderされる。

    document.getElementById('increment')
      .addEventListener('click',function(){
        store.dispatch({type:'INCREMENT'})
      })

    document.getElementById('decrement')
      .addEventListener('click',function(){
        store.dispatch({type:'DECREMENT'})
      })
    document.getElementById('incrementIfOdd')
      .addEventListener('click',function(){
        if(store.getState()%2 !== 0){
          store.dispatch({type:'INCREMENT'})
        }
      })
    document.getElementById('incrementAsync')
      .addEventListener('click',function(){
        setTimeout(function(){store.dispatch({type:'INCREMENT'})},1000)

      })
  </script>
</body>
</html>

考えが今までのデータベースとHTMLといった関係から違う種類のものに変化しているので
そこに注意する。混ざってる

(state,action)=>state

何度も書いてるがこれがreduxのキモである。

Yado_tech

旅館＋ITとはなんぞ

reduxの理解の仕方。