Redux 源码解析系列(一) -- Redux的实现思想

Redux 其实是用来帮我们管理状态的一个框架,它暴露给我们四个接口,分别是:

  • createStore
  • combineReducers
  • bindActionCreators
  • applyMiddleware
  • compose

源码系列里会分别对这五个接口进行解析。

Redux 的源码解析系列开篇之前,先来了解一下它的实现思想。

为什么要有dispatch

假设一种场景下,app里每个组件都需要拿到appState的一部分进行渲染。

但是这里存在一个风险就是,谁都可以修改appState的值,换句话说,有一天当appState变了你都不知道是谁改的,所以我们需要有一个管理员来帮我们管理我们的状态,这时候引入了dispatch函数,来专门修改负责数据的修改。

function dispatch (action) {
  switch (action.type) {
    case 'UPDATE_TITLE_TEXT':
      appState.title.text = action.text
      break
    case 'UPDATE_TITLE_COLOR':
      appState.title.color = action.color
      break
    default:
      break
  }
}

解决问题: 既可以解决组件共享问题,同时不会有数据可以被任意修改的问题。

为什么要有createStore

现在我们有了状态,又有了dispatch,这时候我们需要一个高层管理者store,帮我们管理好他们,这样再用的时候就可以直接store.getState store.dispatch的方式获取和更改组件。

所以我们就有了createStore这个函数帮我们生成store, 然后将getState 跟 dispatch 方法export出去。

function createStore(state, stateChanger) {
  const getState = () => state;
  const dispatch = (action) => stateChanger(state, action)
  return {getState, dispatch}
}

createStore 接受两个参数,一个是表示app的 state。另外一个是 stateChanger,它来描述应用程序状态会根据 action 发生什么变化,其实就是相当于本节开头的 dispatch 代码里面的内容,我们后来会将它命名为reducer。

但是这里还有一个问题,就是数据发生改变之后,我们都需要手动在重新render一次APP,这时候就需要观察者模式,订阅数据的改变,然后自动调用renderAPP,所以我们的createStore功能又强大啦~

function createStore(state, reducer) {
  const getState = () => state;
  const listeners = [];
  const subscribe = (listener) => {
    listeners.push(listener)
  } 
  const dispatch = (action) => {
    reducer(state, action);
    // 数据已发生改变就把所有的listener跑一遍
    listeners.forEach((listener) => {
      listener()
    })
  }

  return {getState, dispatch, subscribe}
}

我们就可以这样使用

store.subscribe(() => renderApp(store.getState()))

由此可以看出,dispatch是一个重要函数,当每一次我们调用dispatch去改变app的状态的时候,它都会同时执行所有的订阅函数。

到这一步,一个APP就已经可以无压力的跑起来啦,最后一步,当然是关注性能,我们这个app 还是有严重性能问题的,因为每一次的dispatch 所有的子组件都会被重新渲染,这当然是不必要的。

所以就需要对reducer产生的前后appState进行一个对比,这就要求reducer必须是一个纯函数,返回的是一个新的object,不能直接更改reducer的参数,这样才能够对比可以通过对比前后的state是否相等,来决定是否render

// reducer用来管理状态变化
function reducer (state, action) {
  if(!state) {
    return appState;
  }
  switch (action.type) {
    case 'CHANGE_TITLE':
      return {
        ...state,
        title: {
          ...state.title,
          text: action.text
        }
      }
    case 'CHANGE_CONTENT':
      return {
        ...state,
        content: {
          ...state.content,
          color: action.color
        }
      }
  }
}
function createStore(state, reducer) {
  let appState = state;
  const getState = () => appState;
  const listeners = [];
  const subscribe = (listener) => {
    listeners.push(listener)
  } 
  const dispatch = (action) => {
    // 覆盖原先的appState
    appState = reducer(state, action);
    listeners.forEach((listener) => {
      listener()
    })
  }

  return {getState, dispatch, subscribe}
}

OK,到这一步,我们的redux就基本完成啦~ 接着改装下我们的reducer,让它有一个初始值,这样我们的createStore就只需要传入一个reducer即可

// reducer用来管理状态变化
function reducer (state, action) {
//设置初始值
  if(!state) {
    return appState;
  }
  switch (action.type) {
    case 'CHANGE_TITLE':
      return {
        ...state,
        title: {
          ...state.title,
          text: action.text
        }
      }
    case 'CHANGE_CONTENT':
      return {
        ...state,
        content: {
          ...state.content,
          color: action.color
        }
      }
  }
}
function createStore (reducer) {
  let state = null
  const listeners = []
  const subscribe = (listener) => listeners.push(listener)
  const getState = () => state
  const dispatch = (action) => {
    // 可以看到 由于reducer返回的是一个新的object,那在外层,我们就可以对比nextProps跟t his.props 来决定是否渲染
    state = reducer(state, action)
    listeners.forEach((listener) => listener())
  }
  dispatch({}) // 初始化 state
  return { getState, dispatch, subscribe }
}

总结以下:createStore里要做三件事

  • getState
  • dispatch
  • subscribe
  • 初始reducer的状态

四个步骤

// 定一个 reducer, 负责管理数据变化还有初始化appState的数据
function reducer (state, action) {
  /* 初始化 state 和 switch case */
}

// 生成 store
const store = createStore(reducer)

// 监听数据变化重新渲染页面
store.subscribe(() => renderApp(store.getState()))

// 首次渲染页面
renderApp(store.getState()) 

// 后面可以随意 dispatch 了,页面自动更新
store.dispatch(...)

我们整个过程就是不断地发现问题,解决问题

1、共享状态 -> dispatch

2、store统一管理 dispatch getState

3、性能优化 --> reducer是一个纯函数

4、最终初始化整个reducer

以上就是redux的大致思想。

参考文档:

http://huziketang.com/books/react/lesson30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Kirito的技术分享

研究优雅停机时的一点思考

最近瞥了一眼项目的重启脚本,发现运维一直在使用 kill-9<pid> 的方式重启 springboot embedded tomcat,其实大家几乎一致认为...

7336
来自专栏Android-JessYan

看到如此多的MVP+Dagger2+Retrofit+Rxjava项目,轻松拿star,心动了吗?

原文地址: http://www.jianshu.com/p/4bbecd0bb027

672
来自专栏Ryan Miao

SpringCloud学习6-如何创建一个服务消费者consumer

1714
来自专栏青枫的专栏

day53_BOS项目_05

定区可以将取派员、分区、客户信息关联到一起。 页面:WEB-INF/pages/base/decidedzone.jsp

434
来自专栏北京马哥教育

linux系统性能监控与优化(3)–memory

虚拟内存以页的方式管理,一般为4K,如果配置了大页,则为2M The Page Frame Reclaim Algorithm.(PFRA) ...

3427
来自专栏为数不多的Android技巧

ART深度探索开篇:从Method Hook谈起

Android上的热修复框架 AndFix 想必已经是耳熟能详,它的原理实际上很简单:方法替换——Java层的每一个方法在虚拟机实现里面都对应着一个ArtMet...

621
来自专栏一个会写诗的程序员的博客

Spring Boot 集成 WebFlux 开发 Reactive Web 应用Spring Boot 集成 WebFlux 开发 Reactive Web 应用

IBM的研究称,整个人类文明所获得的全部数据中,有90%是过去两年内产生的。在此背景下,包括NoSQL,Hadoop, Spark, Storm, Kylin在...

682
来自专栏WindCoder

Java设计模式学习笔记—原型模式

文章最后“Java设计模式笔记示例代码整合”为本系列代码整合,所有代码均为个人手打并运行测试,不定期更新。本节内容位于其Prototype包(package)中...

462
来自专栏coolblog.xyz技术专栏

基于 Java NIO 实现简单的 HTTP 服务器

本文是上一篇文章实践篇,在上一篇文章中,我分析了选择器 Selector 的原理。本篇文章,我们来说说 Selector 的应用,如标题所示,这里我基于 Jav...

58812
来自专栏分布式系统和大数据处理

C#网络编程(接收文件) - Part.5

这篇文章将完成 Part.4 中剩余的部分,它们本来是一篇完整的文章,但是因为上一篇比较长,合并起来页数太多,浏览起来可能会比较不方便,我就将它拆为两篇了,本文...

913

扫码关注云+社区