這次要做的專案是遊戲角色選取的應用程式
做出來的應用程式大概會像這樣：

可以從左邊的角色選項選取到右邊，陣容狀態會依被選取的角色而不斷更動。

建置環境

在專案資料夾，先安裝 redux

$ npm install redux react-redux --save

為了從頭開始一步一腳印學習，我直接把 src 資料夾刪除。刪除之後，再建一個空的 src 資料夾回來xD （其實你也可以直接刪掉資料夾裡面的東西就好），新增一個 index.js 檔案。

在 index.js 裡同樣的先引入需要用到 react 和 reactDOM

import react from 'react';
import reactDOM from 'reatc-dom';

接著建立 component 資料夾，存放所有 child component 檔案。
新增 App.js 檔案，將要用到的 component 引入

import React, { Component } from 'react';

先把要 render 的內容寫好，接著記得要 export

class App extends component{
  render(){
    return(
      <div>
          <h2>SuperSquad</h2>
      </div>
    )
  }
}

export default App;

在 index.js 裡 import 剛剛準備好的 App component 進來，因為我把 App.js 放在 component 資料夾中，所以路徑要寫成 './component/App'

import App from './component/App';

接著把內容渲染到頁面上

ReactDOM.render(<App />, document.getElementById('root'));

OK,現在有畫面啦～～

建置 Reducer

為什麼我要先設定 reducer 而非 store，雖然 Redux 的核心是 Store，但在建立 store 之前，我們需要至少一個 reducer。這個 reducer 描述了哪一個區塊的 store 控制頁面呈現的哪個元件。

現在，我們就要先配置好檔案結構，我們要建立 Action、reducer 和 data folder。
配置完畢的檔案結構如下：

我在 data 資料夾底下放了 characters.json 裡面存放一些角色資料，我們將會透過這個 json 檔來建置我們的 character reducer

在 reducers 底下建立 index.js，這個檔案就是我們 reducer 的根檔案（？）
所以第一件事當然就是先嵌入 json 囉～

import characters_json from '../data/characters.json';

接著重頭戲來啦～Redux reducer 的 JS 語法是要怎麼寫。。。。
reducer 基本上就是一個帶有兩個參數 function，兩個參數分別為 default state 和 action。需要 action 參數是因為，我們要把它 pass 到我們的 reducer 裡，它在最後會呼叫function 裡不同環節一齊作用，然後更新 state。

我們可以把 reducer 想成是咖啡機的過濾器，不同的 actions 代表著不同口味的咖啡，有 lette action, 美式 action, espresso action, 榛果 action⋯⋯。我們所選擇的口味會傳到 reducer 裡，接著更新 store，然後煮出你要的口味的咖啡，這邊我想喝玫瑰拿鐵ＸＤＤＤＤ

來寫 function 嚕！我們讓預設的 state 等於 characters_json

function characters(state = characters_json, action){

}

接著在 function 裡面我們要寫 switch 敘述，想像剛剛的咖啡例子，透過 switch 才會知道什麼樣的 action 對應什麼樣的結果 (state)。
switch 的判斷敘述：
每一個 action 都有它獨具的 type 屬性，因此我們透過 action.type 來識別不同的 action

switch(action.type){

}

第一個內容就放預設，回傳整個 characters.json 裡的陣列內容

switch(action.type){
    default:
      return state;
}

記得最後一行要 export～

export default characters;

呼叫 Provider 和 Store

設置完 reducer 之後，我們便可以在主檔案呼叫它進來，在 src/index.js 之中 import

import rootReducer from './reducers';

redux 提供 provider

import { provider } from 'react-redux';

同時，我們也要引入 createStore

import { createStore } from 'redux';

接著我們要定義 constant，讓它等於 createStore，並把我們的 reducer 傳入

const store = createStore(rootReducer);

截至目前為止，我們已經透過 provider 和 store 綁定好了應用程式要用到的元素。再來，再渲染的地方寫上 provider tag

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

我先透過

console.log(store.getState());

測試現在資料抓取得結果

好der 看起來是有抓到一個包含十個物件的陣列～
明日來弄第一個 Action 和建置第二個 Reducer