Redux Introduction

• 用一個去銀行存款的例子來說明Redux的概念
• 對銀行來說，每個存戶的帳戶資訊可以記錄在一個state裡面如下，裡面存的資料是key-value的形式，key是該帳戶的號碼，value是帳戶資訊

const state = {
  6685943: {
    name: 'Tyler',
    balance: 20
  },
  6685266: {
    name: 'Mikenzi',
    balance: 60
  },
  668508: {
    name: 'Jake',
    balance: 50
  }
}

• 想要存錢的話必須填存款單，你必須寫清楚要存到哪個帳戶，存多少錢的資訊。而存款單就等同於Redux中的Action概念，Action用來描述我想要對state做怎樣的修改。Action是一個物件，其中type欄位是必須的，搭配其他欄位資訊可以描述想要做的動作。

const action = {
  type: 'DEPOSIT',
  accountNumber: 6685943
  amount: 10
}

• 接著你會把存款單跟錢放到一個透明的管子裡面，它不是必須的，但它可以讓你更方便的把存款單跟錢交給行員。這根管子在Redux裡面是Action Creator的概念。Action Creator讓你的action是portable且易於測試，通常會把它包成一個function，創造並return一個Action。

function handleDeposit (accountNumber, amount) {
  type: 'DEPOSIT',
  accountNumber,
  amount
}

• 行員負責將管子內的東西取出，根據上面的資訊決定怎麼處理你的存款。行員在Redux裡面是Reducer的概念，Reducer會接受目前的state以及要做的action，產生目前state的一份copy，根據action修改這個copy，最後把這個copy設定成state。

function reducer (state, action) {
  switch (action.type) {
    case 'DEPOSIT' :
      return Object.assign({}, state, {
        [action.accountNumber]: state.amount + action.amount
      })
    case 'WITHDRAWAL' :
      return Object.assign({}, state, {
        [action.accountNumber]: state.amount - action.amount
      })
    default :
      return state
  }
}

• 那要怎麼呼叫Reducer並且帶給它特定的action呢? Redux提供一個dispatch( ) function，讓你可以帶入action (通常由Action Creator產生)，接著Reducer就會被呼叫，並且將現在的state以及所帶入的action帶進去Reducer。下面的例子中，submitUser()是一個Action Creator。

dispatch(submitUser('Tyler'))