分类导航

程序笔记发布时间：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的使用姿势》

按注释上说这只是一个 convenience method

你可以把 store.dispatch(MyActionCreators.doSomething()) 换成一个转成一个函数

我们使用 action 时是先通过 actionCreator创建action 然后通过 dispatch 派发出去

通过 bindActionCreator(actionCreator,dispatch) 获得一个可以直接创建action并派发的函数

bindActionCreators 就是创建一个对象每个属性都是一个可以直接创建action并派发的函数

例:

action.increase = (info) => { type:'INCREASE'= (info) => { type:'DECREASE'bindActionCreators({
increase: action.increase,decrease: action.decrease
},dispatch)

// 就可以获得:
{
increase: (...args) => dispatch(action.increase(...args)),decrease: (...args) => dispatch(action.decrease(...args))
}

源码：

{ { dispatch(actionCreator.apply(/

Turns an object whose values are action creators,into an object with the
same keys,but with every function wrapped into a dispatch call so they

store.dispatch(MyActionCreators.doSomething()) yourself just fine.
For convenience,you can also pass a single function as the first argument,* and get a function in return.
@param {Function|Object} actionCreators An object whose values are action
creator functions. One hAndy way to obtain it is to use ES6 import * as
syntax. You may also pass a single function.
@param {Function} dispatch The dispatch function available on your Redux
store.
@returns {Function|Object} The object mimicking the original object,but with
every action creator wrapped into the dispatch call. If you passed a
function as actionCreators,the return value will also be a single
function.
*/
export default function bindActionCreators(actionCreators,dispatch) {
// 如果 actionCreators 是一个函数说明只有一个 actionCreator
if (typeof actionCreators === 'function') {
return bindActionCreator(actionCreators,dispatch)
}

if (typeof actionCreators !== 'object' || actionCreators === null) {
throw new Error(
bindActionCreators expected an object or a function,instead received ${ actionCreators === null ? 'null' : typeof actionCreators }. +
Did you write "import ActionCreators from" instead of "import * as ActionCreators from"?
)
}

const keys = Object.keys(actionCreators)
const boundActionCreators = {}
for (let i = 0; i < keys.length; i++) {
const key = keys[i]
const actionCreator = actionCreators[key]
if (typeof actionCreator === 'function') {
boundActionCreators[key] = bindActionCreator(actionCreator,dispatch)
}
}
return boundActionCreators
}

ymiddleware.js

这个应该是最难理解的部分所以放到最后看>_<

个人理解，这个东西就是在dispatch前后做一些事情=.= 类似koa express的中间件嘛

以下参考源码中

@H_720_0@middleware 在dispatch和action之间提供一个第三方程序扩展点。

现在一步一步理解applymiddleware在做什么

首先，假设现在有一个需求，每次dispatch一个action时，都要打印action和state，像下面这样：

const action = addTodo('Use Redux'console.log('dispatching',action)
store.dispatch(action)
console.log('next state',store.getState())

但是不可能每一次都这样打印，也许直接修改dispatch就可以

const next == { console.log('dispatching'='next state'

呐，可能不止一个需求，现在我又想记录错误信息了。我们写两个方法，分别给dispatch添加自己想要的功能。

toaddLogging(storE) { const next == { console.log('dispatching'='next state'function patchStoretoaddCrashReporTing(storE) {
const next = store.dispatch
store.dispatch = function dispatchAndReportErrors(action) {
try {
return next(action)
} catch (err) {
console.error('Caught an exception!',err)
Raven.captureException(err,{
extra: {
action,state: store.getState()
}
})
throw err
}
}
}

patchStoretoaddLogging(storE)
patchStoretoaddCrashReporTing(storE)

但是这样并不好……很明显，我们在修改store的私有属性了，emmm……这是一个比较hack的方法……要改的优雅一点，把修改dispatch的部分封装起来。每一次返回新的dispatch，修改store的部分由 ymiddlewareBymonkeypatching 统一处理。

E) { const next = { { console.log('dispatching'function applymiddlewareBymonkeypatching(store,middlewares) {
middlewares = middlewares.slice()
middlewares.reverse()
// Transform dispatch function with each middleware.
middlewares.forEach(middleware =>
store.dispatch = middleware(storE)
)
}

applymiddlewareBymonkeypatching(store,[logger,crashReporter])

但是这样还是不太好。dispatch是store的私有属性，我们却直接获取了。思考我们为什么重写dispatch，因为我们在用多个中间件的时候，第一个中间件修改完dispatch，下一次修改应该是在前一个的基础之上，包裹上一次修改的dispatch。但其实，这也不是必要的，只要每一次传入上一次修改后的dispatch就可以了。

E) { toaddLogging(next) { { console.log('dispatching'='next state'

这里的next就是之前的中间件处理后的dispatch，我们不再获取store的私有属性了，改为用参数传递。然后在处理之后（logger(storE)(next)）返回一个新的dispatch。

为什么这里要套两个函数而不是传入两个参数(store,next)呢，就相当于把这个函数柯里化了嘛……后面可以看到用处。

改成ES6的箭头函数

const logger = store => next => action =>{ console.log('dispatching'

说实话虽然简洁了，但是看起来一点都不直观……可能是我太菜了。嗯，这就是一个中间件的写法了。

可以简单的实现下 applymiddleware

ymiddleware(store,middlewares) { middlewares =s.slice() middlewares.reverse() let dispatch =s.forEach(middleware =>=E)(dispatch) ) ject.assign({},store,{ dispatch }) }

这样就可以最后使用 applymiddleware

import { createStore,combineReducers,applymiddleware } from 'redux'const todoApp = combineReducers(reducers)
const store = createStore(
todoApp,// applymiddleware() tells createStore() how to handle middleware
 applymiddleware(logger,crashReporter)
)

深入(meiyou)的理解之后开始看applymiddleware.js源码

其中用到里 compose 要先看一下

compose.js

这个是函数式编程的一个……思想？应用？

将函数的嵌套调用写成组合相当于 X)))

export default function compose(...funcs) { if (funcs.length === 0) { return arg => arg }

if (funcs.length === 1) {
return funcs[0]
}
// reduce的参数..
// reduce(function(accumulator,currentValue,currenTindex,array) {...})
return funcs.reduce((a,b) => (...args) => a(b(...args)))
}

/** 使用示例 **/

let a = x => 'a' + x + 'a'
let b = x => 'b' + x + 'b'
let c = x => 'c' + x + 'c'
let foo = compose(b,a)
console.log(foo('v')) // bcavACB
let bar = x => b(c(a(X)))
console.log(bar('v')) // bcavACB

最后看applymiddleware.js

import compose from './compose'

/

Creates a store enhancer that applies middleware to the dispatch method
of the Redux store. This is hAndy for a variety of tasks,such as expressing
asynchronous actions in a concise mAnner,or logging every action payload.
See redux-thunk package as an example of the Redux middleware.
Because middleware is potentially asynchronous,this should be the first
store enhancer in the composition chain.
Note that each middleware will be given the dispatch and getState functions
as named arguments.
@param {...Function} middlewares The middleware chain to be applied.
@returns {Function} A store enhancer applying the middleware.
*/
export default function applymiddleware(...middlewares) {
return createStore => (...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.
)
}

const middlewareAPI = {
getState: store.getState,dispatch: (...args) => dispatch(...args)
}
const chain = middlewares.map(middleware => middleware(middlewareAPI))
dispatch = compose(...chain)(store.dispatch)

return {
...store,dispatch
}
}
}

applymiddleware([middlewares]) 就是返回一个函数传入createStore，返回新的createStore，创建的store的dispatch是经过中间件加工的。

这里可以看到编写中间件嵌套两个函数的用处，先传入一个store，只需要再传入一个最新的dispatch就可以了，就是把dispatch用中间件轮流处理一下。这里使用了compose。

勉强看完源码。假装自己理解了这样子。

大佬总结

以上是大佬教程为你收集整理的Redux源码学习笔记全部内容，希望文章能够帮你解决Redux源码学习笔记所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：

上一篇: JavaScript之scrollTop、scrollH... 下一篇:JavaScript之正则表达式学习笔记

猜你在找的程序笔记相关文章

You can't specify target table 'xxx' for update in FROM clause的解决 2022-07-21
【UNIAPP】上传视频，进度条的前台与后端 2022-07-21
十款代码表白特效，一个比一个浪漫！ 2022-07-04
作业3 2022-07-06
linux系统下部署项目访问报404错误的解决方法 2022-05-30
C++带有指针成员的类处理方式详解 2022-06-07
Linux——（1）基本命令 2022-07-21
JavaScript之正则表达式学习笔记 2019-11-07
Redux源码学习笔记 2019-11-07
Webpack学习笔记 2019-11-07