redux源码解析

crossea 发布于2019-08-22 17:03 / 446人阅读

摘要：此篇文章可作为源码导读使用，只说明了其中部分核心代码，并进行了一些简化处理用法回顾用来创建创建在中编写纯函数来处理用通过和来操作里的数据用来监听中的数据是否发生了变化用来获取中的，并更新视图核心代码初始化数据存放，是传入的默认值存放传入的创

此篇文章可作为redux源码导读使用，只说明了其中部分核心代码，并进行了一些简化处理 用法回顾

用createStore来创建store

创建Action

在Reducer中编写纯函数来处理Action

用Store.dispatch()通过Action和Reducer来操作Store里的数据

用Store.subscribe()来监听Store中的数据是否发生了变化

用store.getState()来获取Store中的state，并更新视图

核心代码 createStore(reducer, preloadedState, enhancer)

1.初始化数据

  let currentReducer = reducer
  let currentState = preloadedState //存放state，preloadedState是传入的默认值
  let currentListeners = [] //存放subscribe传入的listener
  let nextListeners = currentListeners

2.创建dispatch, subscribe, getState等方法

dispatch(action)

1.执行reducer

    currentReducer(currentState, action)

2.执行listener

    const listeners = (currentListeners = nextListeners)
    for (let i = 0; i < listeners.length; i++) {
      const listener = listeners[i]
      listener()
    }

subscribe(listener)

    nextListeners.push(listener)

getState()

    return currentState

applyMiddleware(...middlewares)

    const applyMiddleware = (...middlewares) => createStore => (...args) => {
        const compose = (...funcs) => {
          if (funcs.length === 0) return arg => arg
          if (funcs.length === 1) return funcs[0]
          return funcs.reduce((a, b) => (...args) => a(b(...args)))
        }
        const store = createStore(...args)
        let dispatch = () => {
          throw new Error(
            `Dispatching while constructing your middleware is not allowed. ` +
              `Other middleware would not be applied to this dispatch.`
          )
        }
        let chain = []
        const middlewareAPI = {
          getState: store.getState,
          dispatch: (...args) => dispatch(...args)
        }
        chain = middlewares.map(middleware => middleware(middlewareAPI)) //*1 middlewareAPI是store
        dispatch = compose(...chain)(store.dispatch) //*2 ...chain和store.dispatch是next
        return { ...store, dispatch } //*3 执行dispatch传入action
    }

compose是函数式编程的用法用于简化函数嵌套执行

我们来看看middleware是怎么写的

    const logger = store => next => action => {
      console.log("dispatching", action)
      let result = next(action)
      console.log("next state", store.getState())
      return result
    }

为什么会变成 store => next => action => ?

第一个store是传入的middlewareAPI

第二个next是通过compose合成...middleware和store.dispatch实现中间件级联

第三个action是执行dispatch传入的action

(见注释)

更多文章 yjy5264.github.io

GPU云服务器云服务器 redux源码源码解析 webrtc源码解析 Redux

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94812.html

redux源码解读--applyMiddleware源码解析

摘要：的中间件主要是通过模块实现的。返回的也是一个对象这个其实就是，各个中间件的最底层第三层的哪个函数组成的圆环函数构成的这就是对源码的一个整体解读，水平有限，欢迎拍砖。后续的源码解读和测试例子可以关注源码解读仓库 applyMiddleware源码解析中间件机制在redux中是强大且便捷的，利用redux的中间件我们能够实现日志记录，异步调用等多种十分实用的功能。redux的中间件主要是...

Atom 2019-08-22 13:35 评论0 收藏0
【源码解析】redux-thunk

摘要：的返回值是函数，这个函数经调用，传入参数，之后会在中间件链上进行传递，只要保证每个中间件的参数是并且将传递给下一个中间件。了解了Redux原理之后，我很好奇Redux中间件是怎么运作的，于是选了最常用的redux-thunk进行源码分析。此次分析用的redux-thunk源码版本是2.2.0，redux源码版本是3.7.2。并且需要了解Redux原理 redux中间件都是由redu...

simpleapples 2019-08-21 17:10 评论0 收藏0
redux源码解读--compose源码解析

摘要：源码解析模块的代码十分简练，但是实现的作用却是十分强大。只传递一个参数的时候，就直接把这个函数返回返回组合函数这就是对源码的一个整体解读，水平有限，欢迎拍砖。后续的源码解读和测试例子可以关注源码解读仓库 compose源码解析 compose模块的代码十分简练，但是实现的作用却是十分强大。redux为何称为redux？有人说就是reduce和flux的结合体，而reduce正是comp...

lk20150415 2019-08-21 17:28 评论0 收藏0
redux源码解读－－createStore源码解析

摘要：源码解析是最核心的模块。比如，当我们需要使用中间件的时候，就会像第三个参数传递一个返回值是一个。后续的源码解读和测试例子可以关注源码解读仓库 createStore源码解析 createStore是redux最核心的模块。这个模块就是用于创建一个store对象，同时，对外暴露出dispatch,getState,subscribe和replaceReducer方法。(源码中关于obse...

tianren124 2019-08-21 17:23 评论0 收藏0
Redux 源码解析 - Redux 的架构

摘要：要应用于生成环境必须要用或者，是的进化产物，优于。我们来看一下他的源码，从而学一些东西。里面都是一个一个的模块，一共个模块，都导出了一些的方法，比如这个号函数，一个匿名函数，然后导出他写的方法。整体架构就是这样的。主要用于压缩的时候。 redux很小的一个框架，是从flux演变过来的，尽管只有775行，但是它的功能很重要。react要应用于生成环境必须要用flux或者redux，red...

lylwyy2016 2019-08-19 18:10 评论0 收藏0
redux源码解析

摘要：前言的源码是我阅读过的一些库的源码中，相对简单的。在更新完成后，同时会更新，并依次执行监听者列表。使用新的替换现有的，同时执行是随机的字符串。会为注册监听器，监听器存储在数组中，返回的函数则会注销监听器。使用管道，将逐层的进行包装 showImg(https://segmentfault.com/img/remote/1460000019425043?w=1380&h=810); sh...

chanjarster 2019-08-23 18:01 评论0 收藏0