分类导航

程序笔记发布时间：2019-11-07 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了Redux源码学习笔记，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

https://github.com/reduxjs/redux 版本 4.0.0

先了解一下redux是怎么用的，此处摘抄自阮一峰老师的《》

// store 是保存数据的地方

// 创建 store
import { createStore } from 'redux'
const store = createStore(fn)

// state 是某一时刻 store 的快照，一个 state 对应一个 view
// 可通过 getState() 获取
const state = store.getState()

// Action 是一个对象用来表示 view 发出的改变 state 的通知
// type 是必须的其他属性可以自由设置
const action = {
type: 'ADD_TODO',payload: 'Learn Redux'
}

// 同一种类型的 action 可以写一个函数生成
const ADD_TODO = '添加 TODO'
// 生成 action 的函数: Action Creator
function addTodo(text) {
return {
type: ADD_TODO,text
}
}

const action = addTodo('Learn Redux')

// store.dispatch()是 View 发出 Action 的唯一方法。
store.dispatch(action)

// reducer 是 store 接收 state 返回新的 state 的过程

const defaultState = 0
// reducer 接收 action 返回新的 state
const reducer = (state = defaultState,action) => {
switch(action.type) {
case: 'ADD':
return state + action.payload
default:
return state
}
}
const state = reducer(1,{
type: 'ADD',payload: 2
})

// 创建 store 时传入 reducer 当调用 store.dispatch 时将自动调用 reducer
const store = createStore(reducer)

/*
reducer 是一个纯函数，纯函数要求：

不得改写参数
不能调用系统 I/O 的API
不能调用Date.now()或者Math.random()等不纯的方法，因为每次会得到不一样的结果
*/

// store.subscribe方法设置监听函数，一旦 State 发生变化，就自动执行这个函数
// 返回解除监听函数
let unsubscribe = store.subsribe(() => { console.log(store.getState) })
unsubscribe() // 解除监听

/*
store 提供的三个方法

store.getState()
store.dispatch()
store.subscribe()
*/

// createStore方法还可以接受第二个参数，表示 State 的最初状态。这通常是服务器给出的。
// !这个初始值会覆盖 Reducer 函数默认的初始值
let store = createStore(todoApp,STATE_FROM_SERVER)

// createStore 的简单实现
const createStore = (reducer) => {
let state
let listeners = []

const getState </span>= () =><span style="color: #000000;"&gt; state

const dispatch </span>= action =><span style="color: #000000;"&gt; {
    state </span>=<span style="color: #000000;"&gt; reducer(state,action)
    listeners.forEach(listener </span>=><span style="color: #000000;"&gt; listener())
}

const subscribe </span>= listener =><span style="color: #000000;"&gt; {
    listeners.push(listener)
    </span><span style="color: #0000ff;"&gt;return</span> () =><span style="color: #000000;"&gt; {
        listeners </span>= listeners.filter(l => l !==<span style="color: #000000;"&gt; listener)
    }
}

dispatch({})

</span><span style="color: #0000ff;"&gt;return</span><span style="color: #000000;"&gt; { getState,dispatch,subscribe }

}

// 可以通过 combineReducers 来将多个 Reducer 合为一个
import { combineReducers } from 'redux'

const chatReducer = combineReducers({
chatLog,statusMessage,userName
})

// combineReducer 的简单实现
const combineReducers = reducers => {
return (state = {},action) =>
Object.keys(reducers).reduce(
(nextState,key) => {
nextState[key] = reducers key
return nextState
},{}
)
}

工作流程

dispatch(action) (previousState,action)

Action Creators ======> Store ======> Reducers
^ || <======
_ || (newStatE)
_ (statE) ||
_ ||
(view opt)_ \/
\--- React Comonents

OK 可以开始看源码了~ 网上Redux源码分析的博客真的非常多.. 不过当你知道他的源码究竟有多短就能理解了hhh

combineReducers.js

代码一共179行多是错误处理我先将错误处理全部删掉便只剩28行.....

思路就是创建一个对象将 Reducer 全部放进去

当Action传进来的时候就让每一个Reducer去处理这个action

每个Reducer都有一个对应的key 只处理state中对应字段 state[key] 没有Reducer对应的字段会被忽略

截取出核心代码 + 用法、感觉并不需要注释、逻辑都很直接

{ const reducerKeys =ject.keys(reducers) const finalReducers ={} (let i = 0; i < reducerKeys.length; i++{ const key =

</span><span style="color: #0000ff;"&gt;if</span> (<span style="color: #0000ff;"&gt;typeof</span> reducers[key] === 'function'<span style="color: #000000;"&gt;) {
  finalReducers[key] </span>=<span style="color: #000000;"&gt; reducers[key]
}

}
const finalReducerKeys = Object.keys(finalReducers)

return function combination(state = {},action) {
let hasChanged = false
const nextState = {}
for (let i = 0; i < finalReducerKeys.length; i++) {
const key = finalReducerKeys[i]
const reducer = finalReducers[key]
const previousStateForKey = state[key]
const nextStateForKey = reducer(previousStateForKey,action)

  nextState[key] </span>=<span style="color: #000000;"&gt; nextStateForKey
  hasChanged </span>= hasChanged || nextStateForKey !==<span style="color: #000000;"&gt; previousStateForKey
}
</span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; 如果state每一个key都没有被修改 就直接返回原state</span>
<span style="color: #0000ff;"&gt;return</span> hasChanged ?<span style="color: #000000;"&gt; nextState : state

}
}

/***** 下面是简单的用法实例 *****/
function todos(state = [],action) {
switch (action.typE) {
case 'ADD_TODO':
return state.concat(action.text)
default:
return state
}
}

function counter(state = 0,action) {
switch (action.typE) {
case 'INCREMENT':
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}

let reducer = combineReducers({ list: todos,number: counter })
let state = { list: [],number: 0,otherKey: 'no reducer match will be ignore' }
console.log(statE) // { list: [],otherKey: 'no reducer match will be ignore' }
state = reducer(state,{ type: 'ADD_TODO',text: 'study' })
console.log(statE) // { list: [ 'study' ],number: 0 }
state = reducer(state,text: 'sleep' })
console.log(statE) // { list: [ 'study','sleep' ],{ type: 'INCREMENT' })
console.log(statE) // { list: [ 'study',number: 1 }

s.js 源码

https://cn.js-code.com/res/2019/02-05/22/1c53668bcee393edac0d7b3b3daff1ae.gif" alt="">https://cn.js-code.com/res/2019/02-05/22/405b18b4b6584ae338e0f6ecaf736533.gif" alt="">

import ActionTypes from './utils/actionTypes''./utils/warning'ject from './utils/isPlainObject'

function getUndefinedStateErrormessage(key,action) {
const actionType = action && action.type
const actionDescription =
(actionType && action "${String(actionTypE)}") || 'an action'

return (
Given ${actionDescription},reducer "${key}" returned undefined. +
To ignore an action,you must explicitly return the previous state. +
If you want this reducer to hold no value,you can return null instead of undefined.
)
}

function getUnexpectedStateShapeWarningmessage(
inputState,reducers,action,unexpectedKeyCache
) {
const reducerKeys = Object.keys(reducers)
const argumentName =
action && action.type === ActionTypes.INIT
? 'preloadedState argument passed to createStore'
: 'previous state received by the reducer'

if (reducerKeys.length === 0) {
return (
'Store does not have a valid reducer. Make sure the argument passed ' +
'to combineReducers is an object whose values are reducers.'
)
}

if (!isPlainObject(inputStatE)) {
// 希望 inputState 是一个简单对象：通过 new Object() 、 {} 创建（Object.create(null) 这里好像是不合法的
// [object Array] 中提取 'Array'
// Object.prototype.toString.call(inputStatE).match(/\s([a-z|A-Z]+)/)[1]
return (
The ${argumentNamE} has unexpected type of " +
{}.toString.call(inputStatE).match(/\s([a-z|A-Z]+)/)[1] +
". Expected argument to be an object with the following +
keys: "${reducerKeys.join('","')}"
)
}
// 检查所有Reducer都没有处理到的key （此处实在不解 unexpectedKeyCache 到底何用= =
const unexpectedKeys = Object.keys(inputStatE).filter(
key => !reducers.hasOwnProperty(key) && !unexpectedKeyCache[key]
)

unexpectedKeys.forEach(key => {
unexpectedKeyCache[key] = true
})
// 替换 store 的 Reducer 时会调用 dispatch({ type: ActionTypes.replaCE })
if (action && action.type === ActionTypes.replaCE) return

if (unexpectedKeys.length > 0) {
return (
Unexpected ${unexpectedKeys.length > 1 ? 'keys' : 'key'} +
"${unexpectedKeys.join('","')}" found in ${argumentNamE}. +
Expected to find one of the known reducer keys instead: +
"${reducerKeys.join('","')}". Unexpected keys will be ignored.
)
}
}

function assertReducerShape(reducers) {
Object.keys(reducers).forEach(key => {
const reducer = reducers[key]
const initialState = reducer(undefined,{ type: ActionTypes.INIT })
// Reducer"$ {key}"在初始化时返回undefined。如果传递给reducer的状态未定义，你必须明确返回初始状态。
// 初始状态可以是不可定义。如果你不想为这个reducer设置一个值，你可以使用Null而不是undefined。
if (typeof initialState === 'undefined') {
throw new Error(
Reducer "${key}" returned undefined during initialization. +
If the state passed to the reducer is undefined,you must +
explicitly return the initial state. The initial state may +
not be undefined. If you don't want to set a value for this reducer, +
you can use null instead of undefined.
)
}

if (
  typeof reducer(undefined,{
    type: ActionTypes.PROBE_UNKNOWN_ACTION()
  }) === </span>'undefined'<span style="color: #000000;"&gt;
) {
  // 当使用随机类型探测Reducer${key}时返回undefined。
  // 不要试图处理${ActionTypes.INIT}或者其他在"redux/*"命名空间的动作。它们被认为是私有的。
  // 相反，当你遇到任何未知动作时，你必须返回当前的state，除非当前state是undefined，
  // 那样你要返回初始状态，而不管动作类型。初始状态不可以是undefined，但可以为null
  throw new Error(
    `Reducer "${key}" returned undefined when probed with a random type. ` +
      `Don</span>'t <span style="color: #0000ff;"&gt;try</span><span style="color: #000000;"&gt; to handle ${
        ActionTypes.INIT
      } or other actions </span><span style="color: #0000ff;"&gt;in</span> "redux/*" ` +<span style="color: #000000;"&gt;
      `namespace. They are considered private. Instead,you must </span><span style="color: #0000ff;"&gt;return</span> the ` +<span style="color: #000000;"&gt;
      `current state </span><span style="color: #0000ff;"&gt;for</span> any unknown actions,unless it is undefined,` +<span style="color: #000000;"&gt;
      `</span><span style="color: #0000ff;"&gt;in</span> which <span style="color: #0000ff;"&gt;case</span> you must <span style="color: #0000ff;"&gt;return</span> the initial state,regardless of the ` +<span style="color: #000000;"&gt;
      `action type. The initial state may not be undefined,but can be </span><span style="color: #0000ff;"&gt;null</span><span style="color: #000000;"&gt;.`
  )
}

})
}

/

Turns an object whose values are different reducer functions,into a single
reducer function. It will call every child reducer,and gather their results
into a single state object,whose keys correspond to the keys of the passed
reducer functions.
@param {Object} reducers An object whose values correspond to different
reducer functions that need to be combined into one. One hAndy way to obtain
it is to use ES6 import * as reducers syntax. The reducers may never return
undefined for any action. Instead,they should return their initial state
if the state passed to them was undefined,and the current state for any
unrecognized action.
@returns {Function} A reducer function that invokes every reducer inside the
passed object,and builds a state object with the same shape.
*/
export default function combineReducers(reducers) {
const reducerKeys = Object.keys(reducers)
const finalReducers = {}
for (let i = 0; i < reducerKeys.length; i++) {
const key = reducerKeys[i]

if (process.env.NODE_ENV !== 'production') {
if (typeof reducers[key] === 'undefined') {
warning(No reducer provided for key "${key}")
}
}

if (typeof reducers[key] === 'function') {
finalReducers[key] = reducers[key]
}
}
const finalReducerKeys = Object.keys(finalReducers)

let unexpectedKeyCache
if (process.env.NODE_ENV !== 'production') {
unexpectedKeyCache = {}
}

let shapeAssertionError
try {
// 判断每个reducer都有初始值和对于未知action返回原state
 assertReducerShape(finalReducers)
} catch (E) {
shapeAssertionError = e
}

return function combination(state = {},action) {
if (shapeAssertionError) {
throw shapeAssertionError
}

</span><span style="color: #0000ff;"&gt;if</span> (process.env.NODE_ENV !== 'production'<span style="color: #000000;"&gt;) {
  const warningmessage </span>=<span style="color: #000000;"&gt; getUnexpectedStateShapeWarningmessage(
    state,finalReducers,unexpectedKeyCache
  )
  </span><span style="color: #0000ff;"&gt;if</span><span style="color: #000000;"&gt; (warningmessagE) {
    warning(warningmessagE)
  }
}

let hasChanged </span>= <span style="color: #0000ff;"&gt;false</span><span style="color: #000000;"&gt;
const nextState </span>=<span style="color: #000000;"&gt; {}
</span><span style="color: #0000ff;"&gt;for</span> (let i = 0; i < finalReducerKeys.length; i++<span style="color: #000000;"&gt;) {
  const key </span>=<span style="color: #000000;"&gt; finalReducerKeys[i]
  const reducer </span>=<span style="color: #000000;"&gt; finalReducers[key]
  const previousStateForKey </span>=<span style="color: #000000;"&gt; state[key]
  const nextStateForKey </span>=<span style="color: #000000;"&gt; reducer(previousStateForKey,action)
  </span><span style="color: #0000ff;"&gt;if</span> (<span style="color: #0000ff;"&gt;typeof</span> nextStateForKey === 'undefined'<span style="color: #000000;"&gt;) {
    const errormessage </span>=<span style="color: #000000;"&gt; getUndefinedStateErrormessage(key,action)
    </span><span style="color: #0000ff;"&gt;throw</span> <span style="color: #0000ff;"&gt;new</span><span style="color: #000000;"&gt; Error(errormessagE)
  }
  nextState[key] </span>=<span style="color: #000000;"&gt; nextStateForKey
  hasChanged </span>= hasChanged || nextStateForKey !==<span style="color: #000000;"&gt; previousStateForKey
}
</span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; 如果state每一个key都没有被修改 就直接返回原state</span>
<span style="color: #0000ff;"&gt;return</span> hasChanged ?<span style="color: #000000;"&gt; nextState : state

}
}

s.js

可以参考下0-9a-z' 的随机字符串 const randomString = () =>String(36String(7'''.' const ActionTypes ={ INIT: `@@redux/INIT${randomString()}`,replaCE: `@@redux/replaCE${randomString()}`,PROBE_UNKNOWN_ACTION: () => `@@redux/PROBE_UNKNOWN_ACTION${randomString()}` export default ActionTypes

是redux核心代码，不过这个没有什么难理解的地方

import $$observable from 'symbol-observable'import ActionTypes from './utils/actionTypes'
import isPlainObject from './utils/isPlainObject'

// 创建 store 的函数
// preloadedState: store设置的初始值这个值会覆盖 Reducer 的默认值
// 如果使用了 combineReducers preloadedState 要和 combineReducers 有相同的keys
// enhancer: 中间件
export default function createStore(reducer,preloadedState,enhancer) {
// preloadedState可以不传判断preloadedState是否存在
if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
enhancer = preloadedState
preloadedState = undefined
}

if (typeof enhancer !== 'undefined') {
if (typeof enhancer !== 'function') {
throw new Error('Expected the enhancer to be a function.')
}
// enhancer是一个高阶函数调用enhancer返回一个"加强版"的createStore
return enhancer(createStorE)(reducer,preloadedStatE)
}

if (typeof reducer !== 'function') {
throw new Error('Expected the reducer to be a function.')
}

let currentReducer = reducer
let currentState = preloadedState
let currentListeners = []
let nextListeners = currentListeners
let isDispatching = false
// 判断当前 nextListeners 和 currentListeners 是否为同一个对象
// 如果是一个对象就把 nextListeners 改为 currentListeners 的副本
function ensureCanMutateNextListeners() {
if (nextListeners === currentListeners) {
nextListeners = currentListeners.slice()
}
}
// 获取当前对象如果是正在派发action 则不能获取state
function getState() {
if (isDispatching) {
throw new Error(
'You may not call store.getState() while the reducer is execuTing. ' +
'The reducer has already received the state as an argument. ' +
'Pass it down from the top reducer instead of reading it from the store.'
)
}

</span><span style="color: #0000ff;"&gt;return</span><span style="color: #000000;"&gt; currentState

}
// 订阅添加订阅者
function subscribe(listener) {
if (typeof listener !== 'function') {
throw new Error('Expected the listener to be a function.')
}

</span><span style="color: #0000ff;"&gt;if</span><span style="color: #000000;"&gt; (isDispatching) {
  </span><span style="color: #0000ff;"&gt;throw</span> <span style="color: #0000ff;"&gt;new</span><span style="color: #000000;"&gt; Error(
    </span>'You may not call store.subscribe() while the reducer is execuTing. ' +
      'If you would like to be notified after the store has been updated,subscribe from a ' +
      'component and invoke store.getState() in the callBACk to access the latest state. ' +
      'See https://redux.js.org/api-reference/store#subscribe(listener) for more details.'<span style="color: #000000;"&gt;
  )
}

let isSubscribed </span>= <span style="color: #0000ff;"&gt;true</span>
<span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; 每次修改 nextListeners 都要判断一下 nextListeners 和 currentListeners 是否为同一个对象</span>

ensureCanMutateNextListeners()
// 注意这里修改 nextListeners 之后并没有改变 currentListeners 而是在下一次用到 currentListeners 才会改变
 nextListeners.push(listener)

</span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; 返回一个当前监听者取消订阅的方法</span>
<span style="color: #0000ff;"&gt;return</span> <span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt; unsubscribe() {
  </span><span style="color: #0000ff;"&gt;if</span> (!<span style="color: #000000;"&gt;isSubscribed) {
    </span><span style="color: #0000ff;"&gt;return</span><span style="color: #000000;"&gt;
  }
  </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; 正在派发 action 时不能进行操作</span>
  <span style="color: #0000ff;"&gt;if</span><span style="color: #000000;"&gt; (isDispatching) {
    </span><span style="color: #0000ff;"&gt;throw</span> <span style="color: #0000ff;"&gt;new</span><span style="color: #000000;"&gt; Error(
      </span>'You may not unsubscribe from a store listener while the reducer is execuTing. ' +
        'See https://redux.js.org/api-reference/store#subscribe(listener) for more details.'<span style="color: #000000;"&gt;
    )
  }

  isSubscribed </span>= <span style="color: #0000ff;"&gt;false</span><span style="color: #000000;"&gt;

  ensureCanMutateNextListeners()
  const index </span>=<span style="color: #000000;"&gt; nextListeners.indexOf(listener)
  nextListeners.splice(index,</span>1<span style="color: #000000;"&gt;)
}

}

function dispatch(action) {
if (!isPlainObject(action)) {
throw new Error(
'Actions must be plain objects. ' +
'Use custom middleware for async actions.'
)
}

</span><span style="color: #0000ff;"&gt;if</span> (<span style="color: #0000ff;"&gt;typeof</span> action.type === 'undefined'<span style="color: #000000;"&gt;) {
  </span><span style="color: #0000ff;"&gt;throw</span> <span style="color: #0000ff;"&gt;new</span><span style="color: #000000;"&gt; Error(
    </span>'Actions may not have an undefined "type" property. ' +
      'Have you misspelled a constant?'<span style="color: #000000;"&gt;
  )
}

</span><span style="color: #0000ff;"&gt;if</span><span style="color: #000000;"&gt; (isDispatching) {
  </span><span style="color: #0000ff;"&gt;throw</span> <span style="color: #0000ff;"&gt;new</span> Error('Reducers may not dispatch actions.'<span style="color: #000000;"&gt;)
}

</span><span style="color: #0000ff;"&gt;try</span><span style="color: #000000;"&gt; {
  </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; 用 isDispatching 记录是否正在 派发action 过程中不能进行其他操作</span>
  isDispatching = <span style="color: #0000ff;"&gt;true</span><span style="color: #000000;"&gt;
  currentState </span>=<span style="color: #000000;"&gt; currentReducer(currentState,action)
} </span><span style="color: #0000ff;"&gt;finally</span><span style="color: #000000;"&gt; {
  isDispatching </span>= <span style="color: #0000ff;"&gt;false</span><span style="color: #000000;"&gt;
}
</span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; 用到 listeners 才会修改 currentListeners 以减少修改次数</span>
const listeners = (currentListeners =<span style="color: #000000;"&gt; nextListeners)
</span><span style="color: #0000ff;"&gt;for</span> (let i = 0; i < listeners.length; i++<span style="color: #000000;"&gt;) {
  const listener </span>=<span style="color: #000000;"&gt; listeners[i]
  listener()
}

</span><span style="color: #0000ff;"&gt;return</span><span style="color: #000000;"&gt; action

}

// 替换 Reducer 并派发动作 ActionTypes.replaCE 相当于对state重新进行初始化
function replaceReducer(nextReducer) {
if (typeof nextReducer !== 'function') {
throw new Error('Expected the nextReducer to be a function.')
}

currentReducer </span>=<span style="color: #000000;"&gt; nextReducer
dispatch({ type: ActionTypes.replaCE })

}
// emmmm...看不懂这个可以参考 https://distums.github.io/2017/03/19/observables-proposal-for-ecmascript/
function observable() {
const outerSubscribe = subscribe
return {
subscribe(observer) {
if (typeof observer !== 'object' || observer === null) {
throw new TypeError('Expected the observer to be an object.')
}

    </span><span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt; observeState() {
      </span><span style="color: #0000ff;"&gt;if</span><span style="color: #000000;"&gt; (observer.next) {
        observer.next(getState())
      }
    }

    observeState()
    const unsubscribe </span>=<span style="color: #000000;"&gt; outerSubscribe(observeStatE)
    </span><span style="color: #0000ff;"&gt;return</span><span style="color: #000000;"&gt; { unsubscribe }
  },[$$observable]() {
    </span><span style="color: #0000ff;"&gt;return</span> <span style="color: #0000ff;"&gt;this</span><span style="color: #000000;"&gt;
  }
}

}

dispatch({ type: ActionTypes.INIT })

return {
dispatch,subscribe,getState,replaceReducer,[$$observable]: observable
}
}

s.js

此处参考《http://imweb.io/topic/5a426d32a192c3b460fce354" target="_blank">mapStateToProps，mapDispatchToProps的使用姿势》

按注释