模拟 Redux 学习实现原理

最新推荐文章于 2024-04-13 04:27:38 发布
最新推荐文章于 2024-04-13 04:27:38 发布
阅读量145 收藏
点赞数
分类专栏： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012961419/article/details/116268891
版权

核心逻辑

createStore(reducer, preloadedState , enhancer)

参数：

  • reducer（function） - 根据 Action.type 对 Store 中的状态进行更改
  • preloadedState（any） - 初始状态
  • enhancer（function） - 对 Store 的功能进行增强，例如添加中间件

返回 Store 对象，包含三个方法：

  • getState - 获取状态
  • dispatch - 触发 Action
  • subscribe - 添加监听器，订阅 Store 的更改
// myRedux.js
/*
  createStore(reducer[, preloadedState], enhancer)
  { getState, dispatch, subscribe }
 */

function createStore(reducer, preloadedState) {
  // store 对象中存储的状态
  let currentState = preloadedState

  // 存放订阅者函数
  const currentListeners = []

  // 获取状态
  function getState() {
    // 形成闭包，避免 state 被释放
    return currentState
  }

  // 触发 Action
  function dispatch(action) {
    // 调用 reducer 函数
    currentState = reducer(currentState, action)
    // 循环数组 调用订阅者
    for (let i = 0; i < currentListeners.length; i++) {
      // 获取订阅者
      const listener = currentListeners[i]
      // 调用订阅者
      listener()
    }
  }

  // 订阅状态
  function subscribe(listener) {
    currentListeners.push(listener)
  }

  return {
    getState,
    dispatch,
    subscribe
  }
}

测试

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="increment">+1</button>
  <span id="box">0</span>
  <button id="decrement">-1</button>
  <script src="./myRedux.js"></script>
  <script>
    function reducer(state, action) {
      switch (action.type) {
        case 'increment':
          return state + 1
        case 'decrement':
          return state - 1
        default:
          return state
      }
    }

    // 创建 store
    const store = createStore(reducer, 0);

    // 订阅 store 变化
    store.subscribe(function() {
      // 获取最新的状态
      document.getElementById('box').textContent = store.getState()
    })

    // 获取+按钮
    document.getElementById('increment').onclick = function() {
      // 触发 action 让数值+1
      store.dispatch({type: 'increment'})
    }
    // 获取-按钮
    document.getElementById('decrement').onclick = function() {
      // 触发 acton 让数值-1
      store.dispatch({type: 'decrement'})
    }
  </script>
</body>
</html>

参数类型约束

  • 约束 reducer 必须是一个函数。
  • 约束 action 必须是一个包含 type 属性的对象
// myRedux.js
/*
  createStore(reducer[, preloadedState], enhancer)
  { getState, dispatch, subscribe }
 */

function createStore(reducer, preloadedState) {
  // 约束 reducer 参数类型
  if (typeof reducer !== 'function') throw new Error('reducer 必须是函数')

  // store 对象中存储的状态
  let currentState = preloadedState

  // 存放订阅者函数
  const currentListeners = []

  // 获取状态
  function getState() {
    // 形成闭包，避免 state 被释放
    return currentState
  }

  // 触发 Action
  function dispatch(action) {
    // 判断 action 必须是对象
    if (!isPlainObject(action)) throw new Error('action 必须是对象')
    // 判断对象中是否有 type 属性
    if (typeof action.type === 'undefined') throw new Error('action 中必须要有 type 属性')
    // 调用 reducer 函数
    currentState = reducer(currentState, action)
    // 循环数组 调用订阅者
    for (let i = 0; i < currentListeners.length; i++) {
      // 获取订阅者
      const listener = currentListeners[i]
      // 调用订阅者
      listener()
    }
  }

  // 订阅状态
  function subscribe(listener) {
    currentListeners.push(listener)
  }

  return {
    getState,
    dispatch,
    subscribe
  }
}

// 判断 obj 是否是对象
function isPlainObject(obj) {
  // redux 源码方式
  // 排除基本数据类型和 null
  if (typeof obj !== 'object' || obj === null) return false
  // 区分数组和对象 原型对象对比的方式
  let proto = obj
  // 获取 obj 最顶层的原型对象
  while(Object.getPrototypeOf(proto) !== null) {
    proto = Object.getPrototypeOf(proto)
  }
  return Object.getPrototypeOf(obj) === proto
}

Enhancer

enhancer（强化增强）可以让 createStore 的调用者对返回的 store 对象进行功能上的增强。

enhancer 是一个函数，接收 createStore 作为参数，返回的结果又是一个函数，这个函数接收 reducer 和 preloadedState 作为参数，并返回一个 Store。

createStore 中如果传递了 enhancer，则会调用它以及它返回的函数，从而创建一个 Store 对象。

这样就把权限开放给调用者了。

applyMiddleware 就是一个内置的创建 enhancer 的方法。

// myRedux.js
/*
  createStore(reducer, preloadedState, enhancer)
  { getState, dispatch, subscribe }
 */

function createStore(reducer, preloadedState, enhancer) {
  // 约束 reducer 参数类型
  if (typeof reducer !== 'function') throw new Error('reducer 必须是函数')

  // 判断 enhancer 参数有没有传递
  if (typeof enhancer !== 'undefined') {
    // 判断 enhancer 是不是一个函数
    if (typeof enhancer !== 'function') throw new Error('enhancer 必须是函数')

    return enhancer(createStore)(reducer, preloadedState)
  }

  // store 对象中存储的状态
  let currentState = preloadedState

  // 存放订阅者函数
  const currentListeners = []

  // 获取状态
  function getState() {
    // 形成闭包，避免 state 被释放
    return currentState
  }

  // 触发 Action
  function dispatch(action) {
    // 判断 action 必须是对象
    if (!isPlainObject(action)) throw new Error('action 必须是对象')
    // 判断对象中是否有 type 属性
    if (typeof action.type === 'undefined') throw new Error('action 中必须要有 type 属性')
    // 调用 reducer 函数
    currentState = reducer(currentState, action)
    // 循环数组 调用订阅者
    for (let i = 0; i < currentListeners.length; i++) {
      // 获取订阅者
      const listener = currentListeners[i]
      // 调用订阅者
      listener()
    }
  }

  // 订阅状态
  function subscribe(listener) {
    currentListeners.push(listener)
  }

  return {
    getState,
    dispatch,
    subscribe
  }
}

// 判断 obj 是否是对象
function isPlainObject(obj) {
  // redux 源码方式
  // 排除基本数据类型和 null
  if (typeof obj !== 'object' || obj === null) return false
  // 区分数组和对象 原型对象对比的方式
  let proto = obj
  // 获取 obj 最顶层的原型对象
  while(Object.getPrototypeOf(proto) !== null) {
    proto = Object.getPrototypeOf(proto)
  }
  return Object.getPrototypeOf(obj) === proto
}

实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="increment">+1</button>
  <span id="box">0</span>
  <button id="decrement">-1</button>
  <script src="./myRedux.js"></script>
  <script>
    function enhancer(createStore) {
      return function (reducer, preloadedState) {
        let store = createStore(reducer, preloadedState)
        let dispatch = store.dispatch

        // 对原有的 dispatch 进行增强
        function _dispatch(action) {
          if (typeof action === 'function') {
            // 执行异步操作
            return action(dispatch)
          }

          // 执行同步操作
          dispatch(action)
        }

        return {
          ...store,
          dispatch: _dispatch
        }
      }
    }

    function reducer(state, action) {
      switch (action.type) {
        case 'increment':
          return state + 1
        case 'decrement':
          return state - 1
        default:
          return state
      }
    }

    // 创建 store
    const store = createStore(reducer, 0, enhancer);

    // 订阅 store 变化
    store.subscribe(function() {
      // 获取最新的状态
      document.getElementById('box').textContent = store.getState()
    })

    // 获取+按钮
    document.getElementById('increment').onclick = function() {
      // 触发 action 让数值+1
      // store.dispatch({type: 'increment'})
      store.dispatch(function(dispatch) {
        setTimeout(() => {
          dispatch({type: 'increment'})
        }, 1000);
      })
    }
    // 获取-按钮
    document.getElementById('decrement').onclick = function() {
      // 触发 acton 让数值-1
      store.dispatch({type: 'decrement'})
    }
  </script>
</body>
</html>

applyMiddleware

中间件就是允许在 action 触发之后，在 reducer 接收 action 之前，做一些事情。

本质上 redux 中间件其实就是对 dispatch 进行增强。

applyMiddleware 就是通过增强 dispatch 让多个中间件函数进行组合，以达到在触发 action 时，让多个中间件按照顺序进行执行。

中间件函数由三层函数组成 store => next => action => {}。

中间件执行的操作是最里层的函数，外层的两个函数使用来接收参数用的。

next 就是下一个中间件最里层的函数或 store.dispatch 方法。

定义 applyMiddleware

// myRedux.js
/*
  createStore(reducer, preloadedState, enhancer)
  { getState, dispatch, subscribe }
 */

function createStore(reducer, preloadedState, enhancer) {...
}

// 判断 obj 是否是对象
function isPlainObject(obj) {...
}

function applyMiddleware(...middlewares) {
  return function (createStore) {
    return function (reducer, preloadedState) {
      // 创建 store
      const store = createStore(reducer, preloadedState)

      // 阉割版的 store
      const middlewareAPI = {
        getState: store.getState,
        dispatch: store.dispatch
      }

      // 调用中间件的第一层函数 传递 store 函数
      const chain = middlewares.map(middleware => middleware(middlewareAPI))

      // 调用中间件的第二层函数
      const dispatch = compose(...chain)(store.dispatch)

      return {
        ...store,
        dispatch
      }
    }
  }
}

function compose(...funcs) {
  return function (dispatch) {
    // 反向调用第二层函数，返回值就是传递给上一个中间件的 next
    for (let i = funcs.length - 1; i >= 0; i--) {
      dispatch = funcs[i](dispatch)
    }
    // 最终返回第一个中间件的第三个函数
    return dispatch
  }
}

创建中间件

// middlewares\logger.js
function logger(store) {
  return function(next) {
    return function(action) {
      console.log('logger')
      next(action)
    }
  }
}


// middlewares\thunk.js
function thunk(store) {
  return function(next) {
    return function(action) {
      console.log('thunk')
      if (typeof action === 'function') {
        return action(store.dispatch)
      }
      next(action)
    }
  }
}

使用中间件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="increment">+1</button>
  <span id="box">0</span>
  <button id="decrement">-1</button>
  <script src="./myRedux.js"></script>
  <script src="./middlewares/logger.js"></script>
  <script src="./middlewares/thunk.js"></script>
  <script>
    function enhancer(createStore) {
      return function (reducer, preloadedState) {
        let store = createStore(reducer, preloadedState)
        let dispatch = store.dispatch

        // 对原有的 dispatch 进行增强
        function _dispatch(action) {
          if (typeof action === 'function') {
            // 执行异步操作
            return action(dispatch)
          }

          // 执行同步操作
          dispatch(action)
        }

        return {
          ...store,
          dispatch: _dispatch
        }
      }
    }

    function reducer(state, action) {
      switch (action.type) {
        case 'increment':
          return state + 1
        case 'decrement':
          return state - 1
        default:
          return state
      }
    }

    // 创建 store
    // const store = createStore(reducer, 0, enhancer);
    const store = createStore(reducer, 0, applyMiddleware(logger, thunk));

    // 订阅 store 变化
    store.subscribe(function() {
      // 获取最新的状态
      document.getElementById('box').textContent = store.getState()
    })

    // 获取+按钮
    document.getElementById('increment').onclick = function() {
      // 触发 action 让数值+1
      // store.dispatch({type: 'increment'})

      // logger -> thunk --> reducer
      store.dispatch(function(dispatch) {
        setTimeout(() => {
          dispatch({type: 'increment'})
        }, 1000);
      })
    }
    // 获取-按钮
    document.getElementById('decrement').onclick = function() {
      // 触发 acton 让数值-1
      store.dispatch({type: 'decrement'})
    }
  </script>
</body>
</html>

bindActionCreators

bindActionCreators 用于将 ActionCreator 函数转换成能够触发 Action 的函数。

ActionCreator 是一个返回 Action 的函数。

bindActionCreators(actionCreators, dispatch)

参数：

  • actionCreators（function or object） - 一个 ActionCreator，或一个 value 是 ActionCreator 的对象
  • dispatch - store.dispatch

返回：

  • 如果 actionCreators 是一个对象，则返回一个类似的对象，只不过 value 是可以直接触发（dispatch）Action 的函数
  • 如果 actionCreators 是一个函数，则返回触发 Action 的函数
// ...

const actions = bindActionCreators({increment, decrement}, store.dispatch)

function increment() {
  return { type: 'increment' }
}

function decrement() {
  return { type: 'decrement' }
}

// 获取+按钮
document.getElementById('increment').onclick = function() {
  // 触发 action 让数值+1
  store.dispatch(function(dispatch) {
    setTimeout(() => {
      // dispatch({type: 'increment'})
      actions.increment()
    }, 1000);
  })
}
// 获取-按钮
document.getElementById('decrement').onclick = function() {
  // 触发 acton 让数值-1
  // store.dispatch({type: 'decrement'})
  actions.decrement()
}

// myRedux.js
// ...

function bindActionCreators(actionCreators, dispatch) {
  const boundActionCreators = {}

  // 注意：
  // 这里如果用 var 声明 key，在调用 boundActionCreators[key] 方法时
  // 内部访问的 actionCreators[key] 中的 key 将会是循环结束后的值
  for(let key in actionCreators) {
    boundActionCreators[key] = function () {
      dispatch(actionCreators[key]())
    }
  }

  return boundActionCreators
}

combineReducers

redux 可以将一个大的 reducer 还分成一个个小的 reducer，然后通过 combineReducers 将它们合并成一个大的 reducer。

combineReducers(reducers)

参数：

reducers - 一个由多个不同的 reducer 函数作为 value 的 objec

返回：

一个最终的 reducer 函数，可以将这个 reducer 函数传入 createStore 方法。

合并后的 reducer 可以调用各个子 reducer，并把它们返回的结果合并成一个 state 对象，state 对象的 key 就是 reducers 中的 key。

function counterReducer(state, action) {
  switch (action.type) {
    case 'increment':
      return state + 1
    case 'decrement':
      return state - 1
    default:
      return state
  }
}

const rootReducer = combineReducers({
  counter: counterReducer
})

// 创建 store
// const store = createStore(reducer, 0, applyMiddleware(logger, thunk));
const store = createStore(rootReducer, { counter: 0 }, applyMiddleware(logger, thunk));

// 订阅 store 变化
store.subscribe(function() {
  // 获取最新的状态
  document.getElementById('box').textContent = store.getState().counter
})


// myRedux.js
function combineReducers(reducers) {
  // 1. 检查 reducer 类型 必须是函数
  const reducerKeys = Object.keys(reducers)
  for (let i = 0; i < reducerKeys.length; i++) {
    const key = reducerKeys[i]
    if (typeof reducers[key] !== 'function') throw new Error('reducer 必须是函数')
  }

  // 2. 调用每个小的 reducer 将每个小的 reducer 中返回的状态存储在一个新的大的对象中

  return function (state, action) {
    const nextState = {}

    for (let i = 0; i < reducerKeys.length; i++) {
      const key = reducerKeys[i]
      const reducer = reducers[key]
      const previousStateForKey = state[key]
      nextState[key] = reducer(previousStateForKey, action)
    }

    return nextState
  }
}
皮蛋很白
关注
专栏目录
Redux的工作流程
Coding and studying
07-18 7887
😎😎欢迎来到我的博客😎😎【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏🤩React框架。
Flutter之fish redux状态管理浅析
YYWX的博客
05-04 1319
什么是Flutter？ Flutter 是来自谷歌的一个出色的跨平台框架，可用来为移动、桌面和 Web 平台构建应用程序。 　　目前，Flutter在移动端的应用比较成熟，阿里的咸鱼、美团、头条等顶级互联网公司都有实践应用，虽然生态资源方面不如React Native，但发展势头非常迅猛，流畅的性能体验，以及苹果、安卓代码的一致性方面都令人印象深刻。 　　虽然Web端和桌面端的跨平台应用仍未达...
Redux(1) -手写模拟redux
F_efforts的博客
02-20 268
Redux作为状态管理不仅能在React使用、也能在node等其他地方使用 今天先来看看redux在react当中的应用 首先、先来看一段简单的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=...
redux模拟实现
cksuper2000的博客
08-26 83
//发布订阅模式 //也称作观察者模式，定义了对象间的一对多的依赖关系， //当一个对象的状态发 生改变时，所有依赖于它的对象都将得到通知 //createStor dispatch subscribe class MyRedux{ constructor(){ this.container = [] } getState(...
React入门之Redux（一）：手动模拟Redux的基本流程
安之ccy的博客
07-12 281
解释使用Redux的背景和Redux基本流程
redux的使用
chiuwingyan的博客
06-13 2003
前言想要在react里面使用状态管理，redux就是最好的选择。更加详细的介绍：http://cn.redux.js.org/docs/basics/Reducers.htmlActionAction 本质上是 JavaScript 普通对象。我们约定，action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作。多数情况下，type 会被定义成字符串常量。当应用规模越来越大时，建...
Redux中 combineReducers的使用
Clover ‘s Blog
10-14 864
Redux中 combineReducers的使用
Redux学习笔记
VivianHope的专栏
04-06 516
Redux 基本概念 store store管理整颗状态树。状态树是一个大的对象，有一颗颗state节点构成。 它提供了dispatch、getstate、subscribe这些方法来管理整个状态。 store通过 createStore(reducer, initialState, middleware)来创建。 store.getState()返回state对象。 d...
react-o2o:用react,redux,react-router模拟大众点评
05-08
开发者可以通过阅读和学习这些代码来深入理解如何将React、Redux和React-Router结合应用于实际项目，以及如何使用Mockjs进行前端数据模拟。 通过这个项目，你可以学习到： 1. 如何创建React组件，并利用props和...
前端前沿技术实现原理+源码解析.zip
03-03
在前端开发领域，前沿技术是推动互联网应用不断提升用户体验的关键因素。...以上就是"前端前沿技术实现原理+源码解析.zip"文件可能涉及的一些关键知识点，每个点都值得深入学习和实践，以提升前端开发的专业技能。
Redux框架之combineReducers() 用法讲解
最新发布
2401_84152879的博客
04-13 725
给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里获取，先到先得哦。/>给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里获取，先到先得哦。[外链图片转存中…(img-0leReDSA-1712953596873)][外链图片转存中…(img-KxRUfbbr-1712953596874)]
React笔记 combineReducers函数
weixin_46831501的博客
11-29 681
在React中，我们当有大量数据需要管理我们理所应当的想到使用redux来管理我们的数据。但是一个项目中肯定是不只有一个reducer的，而很可能每个页面都有一个自己的reducer，而怎么将这些子reducer整合到一个reducer中呢。这个时候就需要用到 combineReducers 函数了。 使用方法很简单，只需要将子reducer导入，并且从redux-immutable库中引入combineReducers函数，combineReducers函数接收一个对象，这个对象就是子reducer以及它
3.3 reducer拆分-combineReducers的使用
weixin_45660035的博客
09-10 266
1.简介 对于一个大型的应用，将所有的更新逻辑都放入到单个 reducer 函数中都将会让程序变得不可维护。一般来讲，函数应该比较短，并且只做一件特定的事。因此，把很长的，同时负责很多事的代码拆分成容易理解的小片段是一个很好的编程方式。 基于 Redux 的应用程序中最常见的 state 结构是一个简单的 JavaScript 对象，它最外层的每个 key 中拥有特定域的数据。类似地，给这种 state 结构写 reducer 的方式是分拆成多个 reducer，拆分之后的 reducer 都是相同的结构（
Redux框架之combineReducers() 用法讲解，限时分享
2401_84093019的博客
04-04 823
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料，免费分享给大家，戳这里即可免费领取当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。
Redux源码解析一 combineReducers.js
qq_33715850的博客
01-16 505
Redux源码解析一 combineReducers.js
combineReducers()用法详解
七月
12-07 251
https://www.cnblogs.com/aurora-ql/p/14110920.html
Redux之combineReducers(reducers)详解
热门推荐
我是紫色紫色的专栏
04-13 2万+
转载请注明出处：大家好，最近有点忙，忙什么呢？忙着学习一个新的框架Redux，那么这个框架主要是用来做什么的，这篇博客暂时不做介绍，这篇博客针对有一定Redux开发基础的人员，所以今天我讲的重点是Redux里面很重要的一个方法-combineReducers(reducers)。（一）官网介绍首先，按照惯例，这个方法是什么，干什么用，输入是什么，输出是什么，这些都是我们要了解的，所以我们先来看看官网
react + redux 完整的项目，同时写一下个人感悟
weixin_33898876的博客
11-30 2876
先附上项目源码地址和原文章地址：https://github.com/bailicangd... 做React需要会什么？ react的功能其实很单一，主要负责渲染的功能，现有的框架，比如angular是一个大而全的框架，用了angular几乎就不需要用其他工具辅助配合，但是react不一样，他只负责ui渲染，想要做好一个项目，往往需要其...
edux: redux 的实现原理
07-24
总的来说，Redux 的实现原理是通过单一数据源、纯函数修改状态、订阅通知和中间件增强来管理应用程序的状态，并与 React 紧密集成，实现了可预测、可维护的状态管理。这种架构模式使得应用程序的状态变化可追踪、可...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值