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对应的字段会被忽略

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

== (let i = 0; i < reducerKeys.length; i++=

</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 }

源码

import ActionTypes from './utils/actionTypes''./utils/warning''./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

}
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Redux源码学习笔记

相关文章