摘要：想學習下全家桶中的，剛好看到了阮一峰老師的入門文章，受益匪淺。官方的解釋是是容器，提供可預測化的狀態管理。和，寓意為派遣。這是發出的唯一方法。另外方法會返回一個函數，我們如果要解除監聽，就可以調用這個函數。

我：您好！我對此職位感興趣，可以聊聊嗎？
招聘者：您好！感謝關注。方便發一份您的簡歷嗎？

   幾分鐘后。。。  

招聘者：請過用過react嗎？
我：只看過一些項目，沒有實戰開發過。

招聘者至今杳無音信，再后面跟招聘者聊天基本上都問是否用過react

最近在學習react，記得剛從vue的戰場上廝殺回來，就發現已經跟時代脫軌了。不過幸好，兩個框架思想差別不是很大，看起來也沒有那么的吃力，之前花了一些時間學習了react的語法以及一些簡單使用。想學習下react全家桶中的redux，剛好看到了阮一峰老師的redux入門文章，受益匪淺。于是跟大家一起分享下學習的心得，這個是阮一峰老師的原文文章。

大佬的文章中解釋了rudex什么時候需要不需取用.但是，由于，我是學習，即使知道自己現在目前用不上，但是還是要去搞，要不然需要的時候就書到用時方恨少了[hahaha]。因此，這里我就不跟大家說reudx這個大家伙什么時候要用了，感興趣的骨子們可以移步大佬文章哈。
redux是一種設計模式（一種行之有效的解決方案，一種解決問題的模板）。它是用來管理狀態的，就像數據庫，用來管理數據，數據進行可以對一系列的操作。我們所有需要共享的狀態都可以用過redux來進行操作。官方的解釋是：‘是javascript容器，提供可預測化的狀態管理?？梢宰屇銟嫿ㄒ恢禄膽茫\用于不同的環境，并且易于測試’

先構建一個react項目，直接上手，邊學邊做，這里是通過一個簡單計數器的應用讓大家感受到rudex在項目上如何去應用

create-react-app redux-counter

再引入redux

yarn add redux

把準備工作做完了以后，我們就要想了，之前我們說過我們要把所有狀態都放在rudex里面，但是怎么做呢。Redux給我們提供了一個store來存儲狀態，整個應用store是唯一的
Store有以下用法：

提供應用需要的state，是一個容器

提供getState()方法獲取state

提供dispatch(action)方法獲取state；

提供subscribe(listener)注冊監聽器

現在我們先可以先不必對這些東西有很清楚的了解，只需要知道有這些東西就可以，因為"貧窮會限制我們的想象"。如果我們知道了有，后面有困難就知道好像有東西可以解決。如果我們什么都不知道，那么代碼寫起來就會束手無策，就算百度都不知道怎么去表達我們想要的答案。那么聽我娓娓道來。
在我們剛才構建的src目錄下的index.js文件下修改下代碼

//增加的代碼
import { createStore } from "redux";
import counter from "./reducers";
const store = createStore(counter);
//修改的代碼
ReactDOM.render((

  { store.getState() }
), document.getElementById("root"));

createStore是redux提供提供的函數用來生成store，它接收對store進行處理的reducer作為參數，reducer我們先不說，稍后再講。
我們現在用counter代替下，counter現在就是處理這個計數器的函數，待會兒我們會在src下建一個reducers文件夾里面會暴露出counter這個函數。我們在render中讓view層顯示獲取到state通過 store.getState()
那么我們在src下新建一個reducers文件夾，里面新建一個index.js文件,代碼如下：

export default (state = 0, action) => {
    console.log(action.type)
    switch(action.type) {
      case "INCREMENT": 
        return state + 1;
      case "DECREMENT":
        return state - 1;
      default:
        return state; 
    }
  }

這里提供狀態，提供可以被action計算的狀態，視圖與狀態一一對應。
Redux首次執行時，state為undefined，此時我們可以借機設置并返回應用初始的state，因此這里我們用state=0 來初始化狀態，在這里我們初始化狀態直接在函數參數中通過（state=0）,這是不好的做法，后面我們會把初始狀態定義給一個常量，這里我們就先這樣寫。
然后通過action來改變狀態，當我們在判斷action的時候往往用switch進行操作。但我們用戶要操作數據的時候，就會觸發action。
到這里運行下項目，我們便可以看到界面上出現了一個"0".
接著往下，我們再來寫一個用戶操作的組件Counter,在components下新建一個Counter.js

import React,{ Component } from "react";

class Counter extends Component {
  render () {
      const { value,onIncrement,onDecrement } = this.props;
      return (
          

              Clicked: { value } times
              { "+"}{ " "}
              {"-"}
          
      )
  }
}

export default Counter;

我們想實現能加能減。待會兒我們就需要在父組件中把兩個方法以及state傳遞過來。
src下的index文件更改為如下：

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { createStore }   from "redux";
import Counter from "./components/Counter"
import counter from "./reducers";

const store = createStore(counter);
const rootEl = document.getElementById("root")
const render = () => {
    ReactDOM.render( store.dispatch({
        type: "INCREMENT"
    })}
    onDecrement={() => store.dispatch({
        type: "DECREMENT"
    })}
    />,rootEl)
}
render();
store.subscribe(render)

serviceWorker.unregister();
//多帶帶構建狀態樹,狀態是跟UI統一的

在這里我們又兩個陌生的api。dispatch和subscribe.
dispatch，寓意為派遣。如果我們state里面的狀態要改變，我們就必須要通過store.dispatch方法。這是View發出Action的唯一方法。沒有規矩就不成方圓，這個狀態是大家共享的，因此任何組件想要改變它，這都是唯一途徑.它接收一個action。如果需要詳解了解dispatch如何通過action觸發reducer，可以看下源碼。

store.subscribe(),在這里，store允許我們設置一個監聽函數，何為監聽，就是state改變了，我view要做出改變，這才是MVVM。在React中，我們就監聽render方法，只要state改變了，render就幫你把頁面重新渲染。另外store.subscribe()方法會返回一個函數，我們如果要解除監聽，就可以調用這個函數。做法如下：

let unsubscribe = store.subscribe(() => {
  console.log(store.getState())
})
unsubscribe;

到這里我們就已經完成了一個redux的小應用

redux其實就三大概念。reducer、action、store
我們先說action，action其實最簡單了，就是一個集中便簽，用來管理actionsTypes，store.dispath的時候就告訴action你要干嘛。
接下來就是reducer了，通過actio得到的操作，reducer就來執行相應的操作，并把最終的數據再給store。那么store，很顯然，他把action和reducer聯系起來了，而且他還提供方法給我們操作數據，給視圖提供數據
這里有這次實踐的源碼，有需要的可以采之
未完待續...
*
小生才疏學淺，大三學徒一枚。文章中定有許多不嚴謹之處或是不正確的理解，還望大佬們不吝指教。同時也希望大佬能分享一些自己關于這一塊覺得不錯的干貨鏈接。