美文网首页
redux源码解析

redux源码解析

作者: Wang_Yong | 来源:发表于2021-02-26 14:49 被阅读0次

核心功能

  • getState 获取当前的state
  • dispatch 派发action以更新状态
  • subscribe 订阅与退订
  • 生成actionCreator
  • 合并reducer
    1 getState
function getState(){
   return currentState;
}

2 dispatch

function dispatch(action){
  currentState = currentReducer(state, action)
  listeners.forEach(fn => fn())
}

3 订阅

let listeners = []
function subscribe(listener){
  listeners.push(listener)
  return function(){
    listeners.filter(fn => fn !== listener)
  }
}

4 合并reducers

function combineReducers(reducers){
  let combineState;
  Object.keys(reducers).forEach(name => {
    combineState[name] = reducers[name](state, action)
  })
  return combineState
}
function createStore(reducer) {

  let currentState;
  let currentReducer = reducer;
  let listeners = [];
  
  function getState() {
    return currentState;
  }

  function dispatch(action) {
    currentState = currentReducer(currentState, action);
    listeners.forEach(l => l())
  }

  function subscribe(listener) {
    listeners.push(listener);
    return function () {
      listeners.filter(fn => fn!= listener)
    }
  }
  
  function combineReducer(reducers){
    return function(state = {}, action){
      let combineState = {}
      Object.keys(reducers).forEach(name => {
        combineState[name]  = reducers[name](state, action)
      })
      return combineState;
    }
  }

  dispatch({
    type: '@@redux/INIT'
  })

  return {
    getState,
    dispatch,
    subscribe
  }
  
}

export { createStore }

中间件原理

主要是改装dispatch

相关文章

  • Redux 源码初探

    标签: 源码解析,前端 Redux 1. Reducer combineReducers将多个reducer 合并...

  • redux源码解析

    上周六参加了一个公司的面试,因为是很长时间以来的第一次面试,发挥的并不是很好,有两个下来一想就明白的问题在当时却卡...

  • Redux源码解析

    写在开始 本篇主要结合react-native 使用redux的过程,说明使用redux的方法和原理,揭秘Redu...

  • redux源码解析

    核心功能 getState 获取当前的state dispatch 派发action以更新状态 subscribe...

  • Redux 源码解析

    概述 Redux 是 JavaScript 状态容器,提供可预测化的状态管理方案。其三大原则为: 单一数据源 =>...

  • 【react】Redux源码解析

    Redux 源码 let createStore = (reducer) => { let state; //...

  • redux源码阅读——applyMiddleware

    redux源码——applyMiddleware 相关源码展示 applyMiddleware源码 compose...

  • redux源码解析之applyMiddleware

    前言 项目中一直使用redux来进行状态管理,对于redux中间件传递这一块一直不是很理解,只懂得使用不懂得原理,...

  • Redux+ReactRedux源码解析

    export const ActionTypes = {INIT:'@@redux/INIT'} // 生成一个s...

  • redux-saga 源码解析

    本篇解读是将 api 作为入口进行解读的,因为 redux-saga 的 api 过多尤其是 effect 创建器...

网友评论

      本文标题:redux源码解析

      本文链接:https://www.haomeiwen.com/subject/uljldctx.html