一個萌新眼中的Redux

正式進入咱們主題以前，先給你們講個故事，從前有個叫某馬的人，在他的下面有不少不少的工人，在全國不一樣的地方作着一樣的工做---搬磚，每一個人都搬着本身那塊地盤的磚，乾的津津有味；忽然有一天，搬磚工A想要給搬磚工B寫一封信，又因爲他們在不一樣的城市，並且他不能脫離本身的崗位，這讓搬磚工A很苦惱，因而他找到他的上司，把他的信給了當地的包工頭，這個包工頭不想跑着麼遠幫他送信，因而把這封信給了某馬，某馬想了想，就幫一幫他把，因而把信帶到了另外一個城市，可是因爲不熟悉每一個員工，就把信交給了當地工地的包工頭，這個包工頭順利的把信給了搬磚工B，這個搬磚工B將本身收藏了好久的網圖放在了信封裏讓某馬帶了回去，交給了搬磚工A，這一看不得了，我靠，是個PLMM，因而他們兩個開始了愉快的通」信「。A所在工地的工人固然不服了，憑什麼就你有PLMM聊天，因而也開始寫信，交給包工頭，交給某馬。這一年，某馬由於機票破產了，完結。固然不是，某馬但是很聰明的，他想啊想啊，忽然，想出了一個辦法，他叫了本身麾下的一批搬磚工，讓他們很快作出了一個叫秋秋的東西，固然因爲經費問題，這個秋秋作的事情很簡單，每一個人均可以將本身的信交給秋秋，而後向秋秋髮出要求，將信發給B，固然，秋秋很笨，你須要提早把全部要發的全部信交給它，好比「你好」、「N-SL」、「C-K」，而後對他提出要求，「把’N-SL‘發出去」，這樣它就會從全部消息裏選擇你要求的那個，並把消息發過去了。可是要收到這個信的複製品的前提是你要先去預定這個消息，這樣🐦就能找到你的地方，而後將信送過來。今後之後，某馬蒸蒸日上...慢慢的，秋秋有了語言功能，A發現了，B是個男的，完結。

---

​ 在不少萌新（固然包括我）在剛剛開始接觸Redux的時候，都有一總感受，我*，這東西怎麼這麼繞，好煩啊。而後，就開始麻煩某馬了...

​ 其實Redux真的不難，正如上面咱們故事所講的，React的跨組件通訊在Hooks出來以前急需一種能在全局監聽和訂閱狀態的工具，這個時候，Reudx出現了，不過在這裏說明下，Redux並非由於React產生的，也不是和React綁定的，不要由於本身不想學React就不去接觸Redux，我以爲這個真的頗有必要了解熟悉。

​ 爲了更好的上手，咱們來本身實現一下吧！在上面的秋秋是什麼？也就是一個叫作store的東西，他要把全部信息蒐集起來，在這裏有些什麼東西呢，發佈你要讓他執行的行爲是吧，也就是Action，還有呢，它要獲得全部的信，讓後把信統一管理，就是一個Reducer，而後經過dispatch將指定的Action行爲告訴秋秋，它就能將消息發出去。對方要收到這個消息須要怎麼樣，固然是訂閱這個消息了，subscribe是吧，這樣當State改變的時候，你就能夠獲取改變消息了。

​ 首先，咱們要定一個createStore的東西，來產生store吧，這個東西也要蒐集全部的信息吧，也就是Reducer

const createStore = (reducer) => {}
複製代碼

在這裏面有什麼呢，咱們的秋秋store

const createStore = (reducer) => {
    const store = {}
}
複製代碼

固然還有一些方法和訂閱的人

const createStore = (reducer) => {
    const store = {}

    store.listener = []
    store.state = reducer(undefined, {})
    store.subscribe = (listener) => {}
    store.dispatch = (action) => {}

    return store
}
複製代碼

固然，還須要有人來訂閱這個消息。

store.subscribe = listener => {
    store.listener.push(listener)
}
複製代碼

最後，咱們要須要根據Action去改變咱們要發出消息,而後通知全部的訂閱者是吧。

store.dispatch = action => {
    store.state = reducer(store.state, action)
    store.listener.forEach(listener => listener())
}
複製代碼

而後，咱們就完成了一個Redux，什麼！完了？沒錯，其實Redux真的就這麼簡單，最後，咱們加上獲取全部state的方法。把代碼放在一塊兒來看看

const createStore = reducer => {
  const store = {}
  store.state = reducer(undefined, {})
  store.listener = []

  store.subscribe = listener => {
    store.listener.push(listener)
  }

  store.dispatch = action => {
    store.state = reducer(store.state, action)
    store.listener.forEach(listener => listener())
  }

  store.getState = () => store.state

  return store
}
複製代碼

咱們來試試怎麼樣

const initialState = {
  count: 0
}

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "ADD":
      return {
        count: state.count + 1
      }
    case "REDUCE":
      return {
        count: state.count - 1
      }
    default:
      return {
        ...state
      }
  }
}

const action = {
  add: {
    type: "ADD"
  },
  reduce: {
    type: "REDUCE"
  }
}

const store = createStore(reducer)

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

store.dispatch(action.add)
store.dispatch(action.add)
//{ count: 1 }
//{ count: 2 }
複製代碼

完美！

以上是本人本身的理解，Reducer其實不能理解爲全部的信息，我也想不出來到底該怎麼來講這個能更好的插入這個故事裏面了😭，若有意見歡迎提出了，我必定接受！

參考文章

Redux中文官方文檔

【React系列】從零開始實現Redux