一个萌新眼中的Redux

Moneei
255 阅读4分钟

正式进入我们主题之前，先给大家讲个故事，从前有个叫某马的人，在他的下面有很多很多的工人，在全国不同的地方做着同样的工作---搬砖，每个人都搬着自己那块地盘的砖，干的津津有味；突然有一天，搬砖工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

avatar
文章
阅读
粉丝