Redux三部曲之曲一《還闊以》

背景

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

幾分鐘後。。。

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

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

臥薪嚐膽

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

關於Redux

大佬的文章中解釋了rudex何時須要不需取用.可是，因爲，我是學習，即便知道本身如今目前用不上，可是仍是要去搞，要否則須要的時候就書到用時方恨少了[hahaha]。所以，這裏我就不跟你們說reudx這個你們夥何時要用了，感興趣的骨子們能夠移步大佬文章哈。
redux是一種設計模式（一種行之有效的解決方案，一種解決問題的模板）。它是用來管理狀態的，就像數據庫，用來管理數據，數據進行能夠對一系列的操做。咱們全部須要共享的狀態均可以用過redux來進行操做。官方的解釋是：‘是javascript容器，提供可預測化的狀態管理。可讓你構建一致化的應用，運用於不一樣的環境，而且易於測試’

進入rudex

先構建一個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((<div>
  { store.getState() }
</div>), 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 (
          <div>
              Clicked: { value } times
              <button onClick={ onIncrement }>{ '+'}</button>{ ' '}
              <button onClick={ onDecrement }>{'-'}</button>
          </div>
      )
  }
}

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(<Counter value={store.getState()} onIncrement={() => 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聯繫起來了，並且他還提供方法給咱們操做數據，給視圖提供數據
這裏有此次實踐的源碼，有須要的能夠採之
未完待續...
* 小生才疏學淺，大三學徒一枚。文章中定有許多不嚴謹之處或是不正確的理解，還望大佬們不吝指教。同時也但願大佬能分享一些本身關於這一塊以爲不錯的乾貨連接。