一个萌新眼中的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