react - redux 源码解读

怼烎@ 2023-05-31 02:33 12阅读 0赞

### react - redux 源码解读 ###

*   *  redux的所有源码文件如下截图
     *  createStore函数
     *  combineReducers
     *  bindActionCreators
     *  applyMiddleware
     *  compose
     *  \_\_DO\_NOT\_USE\_\_ActionTypes

## redux的所有源码文件如下截图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_16_color_FFFFFF_t_70]  
`在index.js 我们可以看到redux总共暴露的接口有以下这些`

1.  createStore
2.  combineReducers
3.  bindActionCreators
4.  applyMiddleware
5.  compose
6.  \_\_DO\_NOT\_USE\_\_ActionTypes

## createStore函数 ##

**入参介绍**

1.  reducer: 函数参数是当前的值currentState和要处理的操作action
2.  preloadedState: 初始化state
3.  enhancer: store拓展，redux自动applyMiddleware api可用于拓展store(更像是拓展dispatch)

**返回值对象属性**

1.  dispatch：发送action的函数
2.  subscribe：订阅一个函数监听，在react-redux connect中使用到，配合dispatch函数实现发布订阅模型
3.  getState: 读取store的值api
4.  replaceReducer：替换reducer函数，执行该函数会发出一个ActionTypes.REPLACE的action
5.  \[$$observable\]: observable 配置observable对象实现观察者模型

## combineReducers ##

*  合并reducers函数，返回值就是合并之后的reducer

1.  这个函数会过滤掉入参reducers中不是函数的的值, 见下源码  
    ![在这里插入图片描述][20191028150728836.png]
2.  该函数还会判断reducer函数，执行初始化action和一个随机action的时候是否会返回undefined，为undefined时执行会抛出异常，具体代码见下图  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_16_color_FFFFFF_t_70 1]
3.  开发环境执行函数还会调用 getUnexpectedStateShapeWarningMessage 检测 state和reducers是否有key冲突，初始化state是不是为对象，是否有reducers，action的type是否为ActionTypes.INIT，具体见  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_16_color_FFFFFF_t_70 2]

## bindActionCreators ##

*  通过闭包，把 dispatch 和 actionCreator 隐藏起来，让其他地方感知不到 redux 的存在  
    把我们的action生成函数类似于下面代码

function increment() { 
      return { 
        type: 'INCREMENT'
      }
    }
    function add(count) { 
      return { 
        type: 'ADD',
        count: count
      }
    }
    
    const actions = { 
      function increment() { 
    	  return { 
    	    type: 'INCREMENT'
    	  }
    	},
      function add(count) { 
    	  return { 
    	    type: 'ADD',
    	    count: count
    	  }
    	}
    }
    
    执行 bindActionCreators（actions, dispatch）
    输出 actions = { 
        increment: (...args) => dispatch(
    	    (function increment() { 
    		  return { 
    		    type: 'INCREMENT'
    		  }
    		})(...args)
    	),
        add: (count) => dispatch(
    	    (function add(count) { 
    		  return { 
    		    type: 'ADD',
    		    count: count
    		  }
    		})(count)
    	)
    }

## applyMiddleware ##

使用方法

const store = createStore(
      reducer,
      applyMiddleware(...middleware)
    )

主要作用，对dispatch功能加强或者说增加函数处理，也就是增加中间件。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_16_color_FFFFFF_t_70 3]

*  例如简单的redux-thunk中间件

## compose ##

`一个工具函数用于生成一个组合一系列函数从右到左的执行`

## \_\_DO\_NOT\_USE\_\_ActionTypes ##

`一些不能使用的action类型`

未完待续。。。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_16_color_FFFFFF_t_70]: /images/20230531/d0940ab14f86469aaa7bb849b5e0cd0f.png
[20191028150728836.png]: /images/20230531/4b003cb51b1844d6a71c5456ff2bd205.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_16_color_FFFFFF_t_70 1]: /images/20230531/e1380634157d47d4ab26a92ee080e130.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_16_color_FFFFFF_t_70 2]: /images/20230531/cb6cb82e78284371846f0f5f52923aef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_16_color_FFFFFF_t_70 3]: /images/20230531/a781d98a9b344f89a4a742b05de0db22.png