摘要：想學(xué)習(xí)下全家桶中的，剛好看到了阮一峰老師的入門文章，受益匪淺。官方的解釋是是容器，提供可預(yù)測(cè)化的狀態(tài)管理。和，寓意為派遣。這是發(fā)出的唯一方法。另外方法會(huì)返回一個(gè)函數(shù)，我們?nèi)绻獬O(jiān)聽(tīng)，就可以調(diào)用這個(gè)函數(shù)。

我：您好！我對(duì)此職位感興趣，可以聊聊嗎？
招聘者：您好！感謝關(guān)注。方便發(fā)一份您的簡(jiǎn)歷嗎？

   幾分鐘后。。。  

招聘者：請(qǐng)過(guò)用過(guò)react嗎？
我：只看過(guò)一些項(xiàng)目，沒(méi)有實(shí)戰(zhàn)開(kāi)發(fā)過(guò)。

招聘者至今杳無(wú)音信，再后面跟招聘者聊天基本上都問(wèn)是否用過(guò)react

最近在學(xué)習(xí)react，記得剛從vue的戰(zhàn)場(chǎng)上廝殺回來(lái)，就發(fā)現(xiàn)已經(jīng)跟時(shí)代脫軌了。不過(guò)幸好，兩個(gè)框架思想差別不是很大，看起來(lái)也沒(méi)有那么的吃力，之前花了一些時(shí)間學(xué)習(xí)了react的語(yǔ)法以及一些簡(jiǎn)單使用。想學(xué)習(xí)下react全家桶中的redux，剛好看到了阮一峰老師的redux入門文章，受益匪淺。于是跟大家一起分享下學(xué)習(xí)的心得，這個(gè)是阮一峰老師的原文文章。

大佬的文章中解釋了rudex什么時(shí)候需要不需取用.但是，由于，我是學(xué)習(xí)，即使知道自己現(xiàn)在目前用不上，但是還是要去搞，要不然需要的時(shí)候就書(shū)到用時(shí)方恨少了[hahaha]。因此，這里我就不跟大家說(shuō)reudx這個(gè)大家伙什么時(shí)候要用了，感興趣的骨子們可以移步大佬文章哈。
redux是一種設(shè)計(jì)模式（一種行之有效的解決方案，一種解決問(wèn)題的模板）。它是用來(lái)管理狀態(tài)的，就像數(shù)據(jù)庫(kù)，用來(lái)管理數(shù)據(jù)，數(shù)據(jù)進(jìn)行可以對(duì)一系列的操作。我們所有需要共享的狀態(tài)都可以用過(guò)redux來(lái)進(jìn)行操作。官方的解釋是：‘是javascript容器，提供可預(yù)測(cè)化的狀態(tài)管理。可以讓你構(gòu)建一致化的應(yīng)用，運(yùn)用于不同的環(huán)境，并且易于測(cè)試’

先構(gòu)建一個(gè)react項(xiàng)目，直接上手，邊學(xué)邊做，這里是通過(guò)一個(gè)簡(jiǎn)單計(jì)數(shù)器的應(yīng)用讓大家感受到rudex在項(xiàng)目上如何去應(yīng)用

create-react-app redux-counter

再引入redux

yarn add redux

把準(zhǔn)備工作做完了以后，我們就要想了，之前我們說(shuō)過(guò)我們要把所有狀態(tài)都放在rudex里面，但是怎么做呢。Redux給我們提供了一個(gè)store來(lái)存儲(chǔ)狀態(tài)，整個(gè)應(yīng)用store是唯一的
Store有以下用法：

提供應(yīng)用需要的state，是一個(gè)容器

提供getState()方法獲取state

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

提供subscribe(listener)注冊(cè)監(jiān)聽(tīng)器

現(xiàn)在我們先可以先不必對(duì)這些東西有很清楚的了解，只需要知道有這些東西就可以，因?yàn)?貧窮會(huì)限制我們的想象"。如果我們知道了有，后面有困難就知道好像有東西可以解決。如果我們什么都不知道，那么代碼寫(xiě)起來(lái)就會(huì)束手無(wú)策，就算百度都不知道怎么去表達(dá)我們想要的答案。那么聽(tīng)我娓娓道來(lái)。
在我們剛才構(gòu)建的src目錄下的index.js文件下修改下代碼

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

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

createStore是redux提供提供的函數(shù)用來(lái)生成store，它接收對(duì)store進(jìn)行處理的reducer作為參數(shù)，reducer我們先不說(shuō)，稍后再講。
我們現(xiàn)在用counter代替下，counter現(xiàn)在就是處理這個(gè)計(jì)數(shù)器的函數(shù)，待會(huì)兒我們會(huì)在src下建一個(gè)reducers文件夾里面會(huì)暴露出counter這個(gè)函數(shù)。我們?cè)趓ender中讓view層顯示獲取到state通過(guò) store.getState()
那么我們?cè)趕rc下新建一個(gè)reducers文件夾，里面新建一個(gè)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; 
    }
  }

這里提供狀態(tài)，提供可以被action計(jì)算的狀態(tài)，視圖與狀態(tài)一一對(duì)應(yīng)。
Redux首次執(zhí)行時(shí)，state為undefined，此時(shí)我們可以借機(jī)設(shè)置并返回應(yīng)用初始的state，因此這里我們用state=0 來(lái)初始化狀態(tài)，在這里我們初始化狀態(tài)直接在函數(shù)參數(shù)中通過(guò)（state=0）,這是不好的做法，后面我們會(huì)把初始狀態(tài)定義給一個(gè)常量，這里我們就先這樣寫(xiě)。
然后通過(guò)action來(lái)改變狀態(tài)，當(dāng)我們?cè)谂袛郺ction的時(shí)候往往用switch進(jìn)行操作。但我們用戶要操作數(shù)據(jù)的時(shí)候，就會(huì)觸發(fā)action。
到這里運(yùn)行下項(xiàng)目，我們便可以看到界面上出現(xiàn)了一個(gè)"0".
接著往下，我們?cè)賮?lái)寫(xiě)一個(gè)用戶操作的組件Counter,在components下新建一個(gè)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;

我們想實(shí)現(xiàn)能加能減。待會(huì)兒我們就需要在父組件中把兩個(gè)方法以及state傳遞過(guò)來(lái)。
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();
//多帶帶構(gòu)建狀態(tài)樹(shù),狀態(tài)是跟UI統(tǒng)一的

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

store.subscribe(),在這里，store允許我們?cè)O(shè)置一個(gè)監(jiān)聽(tīng)函數(shù)，何為監(jiān)聽(tīng)，就是state改變了，我view要做出改變，這才是MVVM。在React中，我們就監(jiān)聽(tīng)render方法，只要state改變了，render就幫你把頁(yè)面重新渲染。另外store.subscribe()方法會(huì)返回一個(gè)函數(shù)，我們?nèi)绻獬O(jiān)聽(tīng)，就可以調(diào)用這個(gè)函數(shù)。做法如下：

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

到這里我們就已經(jīng)完成了一個(gè)redux的小應(yīng)用

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