redux

一、什麼是redux

Redux 是 JavaScript 狀態容器，提供可預測化的狀態管理。可以讓你構建一致化的應用，運行於不同的環境（客戶端、服務器、原生應用），並且易於測試。Redux 除了和 React 一起用外，還支持其它界面庫。 它體小精悍（只有2kB，包括依賴）。

二、學習網址：

http://www.redux.org.cn/ 中文網址
http://redux.js.org/ 英文網址

三、安裝與引入

npm install --save redux 安裝
import { createStore } from 'redux';引入

四、redux三大原則

單一數據源、state是隻讀的，使用純函數來執行修改

五、使用redux

當安裝好redux包並引入以後，我們通過creteStore(reducer)創建一個store狀態機，用於狀態管理。reducer是一個純函數【純函數即返回值只有傳入的參數決定】，reducer(state,action)有2個參數,state爲當前的狀態，action 就是一個描述“發生了什麼”的普通對象，reducer中通過switch流程控制語句判斷action.type的值，來更改state。通過使用store.dispatch(action)來觸發aciton的改變，然後通過store.subscribe(()=>{}),來手動訂閱更新，當store.dispatch(action)後，就會觸發store.subscribe。通過使用store.getState()獲取當前store中state狀態

import{ render } from 'react-dom';
import { createStore } from 'redux';

/**
 * 這是一個 reducer，形式爲 (state, action) => state 的純函數。
 * 描述了 action 如何把 state 轉變成下一個 state。
 *
 * state 的形式取決於你，可以是基本類型、數組、對象、
 * 甚至是 Immutable.js 生成的數據結構。惟一的要點是
 * 當 state 變化時需要返回全新的對象，而不是修改傳入的參數。
 *
 * 下面例子使用 `switch` 語句和字符串來做判斷，但你可以寫幫助類(helper)
 * 根據不同的約定（如方法映射）來判斷，只要適用你的項目即可。
 */
function counter(state = 0, action) {
  switch (action.type) {
  case 'INCREMENT':
    return state + 1;
  case 'DECREMENT':
    return state - 1;
  default:
    return state;
  }
}

// 創建 Redux store 來存放應用的狀態。
// API 是 { subscribe, dispatch, getState }。
let store = createStore(counter);

// 可以手動訂閱更新，也可以事件綁定到視圖層。
store.subscribe(() =>
  console.log(store.getState())
);

// 改變內部 state 惟一方法是 dispatch 一個 action。
// action 可以被序列化，用日記記錄和儲存下來，後期還可以以回放的方式執行
store.dispatch({ type: 'INCREMENT' });
// 1
store.dispatch({ type: 'INCREMENT' });
// 2
store.dispatch({ type: 'DECREMENT' });
// 1

render(
 //這裏我們通過將store傳入組件，後續我們即可以通過this.props.store來調用store
  <Counter store={store} />,
  document.querySelector('#root')
)

六、redux中的一些處理

1. action有可能需要多次調用，爲了避免書寫麻煩，我們用一個方法來創建並返回一個action，action必須是一個對象，這個方法官方的叫法是actionCreator。
   在redux裏要更改數據，必須通過reducer來更改，觸發reducer的惟一方式是dispatch一個action, 只要dispatch了action，所對應的reducer就會執行，reducer執行之後，state就發生了改變

const add = (num = 1) => {
  return {
    type: 'ADD',
    num
  }
}
const reduce = (num = 1) => {
  return {
    type: 'REDUCE',
    num
  }
}
store.dispatch(add(5))
store.dispatch(reduce(2))

在處理action：type時，如果type值我們寫錯了，redux也不會報錯，他會執行default默認值，這時我們就很尷尬了，所以我們常用的辦法時，在action文件夾裏創建一個actionType文件，將所有action裏要用到的type值，用變量存起來，變量值爲字符串即下面的做法，後面我們將type類型用變量引入，加入不存在這個變量的話，就會出現undefined報錯

// 定義action的類型

export const ADD = 'ADD';
export const REDUCE = 'REDUCE';

export const START_GET_DATA = 'START_GET_DATA';
export const GET_DATA_SUCCESS = 'GET_DATA_SUCCESS';

// 導入actionType
import {
  ADD,
  REDUCE,
  START_GET_DATA,
  GET_DATA_SUCCESS
} from './actionType';

// ·加· 這個動作的action creator,
export const add = (num = 1) => {
  return {
    type: ADD,
    num
  }
}

2. 一個store裏面不只一個reducer，可能有很多個reducer，這時我們可以把reducer提到一個文件夾單獨編寫，將每一個reducer的名字取爲文件名，然後暴露出去，在從index.js文件裏使用redux中combineReducers將所有reducer暴露出去
   

import {
  combineReducers
} from 'redux';

import cart from './cart';
// combineReducers 是redux提供的一個方法，用於合併多個reducer
export default combineReducers({
  cart
})