模拟 Redux 学习实现原理
核心逻辑
createStore(reducer, preloadedState , enhancer)
参数：
- reducer（function） - 根据 Action.type 对 Store 中的状态进行更改
- preloadedState（any） - 初始状态
- enhancer（function） - 对 Store 的功能进行增强，例如添加中间件
返回 Store 对象，包含三个方法：
- getState - 获取状态
- dispatch - 触发 Action
- subscribe - 添加监听器，订阅 Store 的更改
// myRedux.js
/*
createStore(reducer[, preloadedState], enhancer)
{ getState, dispatch, subscribe }
*/
function createStore(reducer, preloadedState) {
// store 对象中存储的状态
let currentState = preloadedState
// 存放订阅者函数
const currentListeners = []
// 获取状态
function getState() {
// 形成闭包，避免 state 被释放
return currentState
}
// 触发 Action
function dispatch(action) {
// 调用 reducer 函数
currentState = reducer(currentState, action)
// 循环数组 调用订阅者
for (let i = 0; i < currentListeners.length; i++) {
// 获取订阅者
const listener = currentListeners[i]
// 调用订阅者
listener()
}
}
// 订阅状态
function subscribe(listener) {
currentListeners.push(listener)
}
return {
getState,
dispatch,
subscribe
}
}
测试
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<button id="increment">+1button>
<span id="box">0span>
<button id="decrement">-1button>
<script src="./myRedux.js">script>
<script>
function reducer(state, action) {
switch (action.type) {
case 'increment':
return state + 1
case 'decrement':
return state - 1
default:
return state
}
}
// 创建 store
const store = createStore(reducer, 0);
// 订阅 store 变化
store.subscribe(function() {
// 获取最新的状态
document.getElementById('box').textContent = store.getState()
})
// 获取+按钮
document.getElementById('increment').onclick = function() {
// 触发 action 让数值+1
store.dispatch({
type: 'increment'})
}
// 获取-按钮
document.getElementById('decrement').onclick = function() {
// 触发 acton 让数值-1
store.dispatch({
type: 'decrement'})
}
script>
body>
html>
参数类型约束
- 约束 reducer 必须是一个函数。
- 约束 action 必须是一个包含 type 属性的对象
// myRedux.js
/*
createStore(reducer[, preloadedState], enhancer)
{ getState, dispatch, subscribe }
*/
function createStore(reducer, preloadedState) {
// 约束 reducer 参数类型
if (typeof reducer !== 'function') throw new Error('reducer 必须是函数')
// store 对象中存储的状态
let currentState = preloadedState
// 存放订阅者函数
const currentListeners = []
// 获取状态
function getState() {
// 形成闭包，避免 state 被释放
return currentState
}
// 触发 Action
function dispatch(action) {
// 判断 action 必须是对象
if (!isPlainObject(action)) throw new Error('action 必须是对象')
// 判断对象中是否有 type 属性
if (typeof action.type === 'undefined') throw new Error('action 中必须要有 type 属性')
// 调用 reducer 函数
currentState = reducer(currentState, action)
// 循环数组 调用订阅者
for (let i = 0; i < currentListeners.length; i++) {
// 获取订阅者
const listener = currentListeners[i]
// 调用订阅者
listener()
}
}
// 订阅状态
function subscribe(listener) {
currentListeners.push(listener)
}
return {
getState,
dispatch,
subscribe
}
}
// 判断 obj 是否是对象
function isPlainObject(obj) {
// redux 源码方式
// 排除基本数据类型和 null
if (typeof obj !== 'object' || obj === null) return false
// 区分数组和对象 原型对象对比的方式
let proto = obj
// 获取 obj 最顶层的原型对象
while(Object.getPrototypeOf(proto) !== null) {
proto = Object.getPrototypeOf(proto)
}
return Object.getPrototypeOf(obj) === proto
}
Enhancer
enhancer（强化增强）可以让 createStore 的调用者对返回的 store 对象进行功能上的增强。
enhancer 是一个函数，接收 createStore 作为参数，返回的结果又是一个函数，这个函数接收 reducer 和 preloadedState 作为参数，并返回一个 Store。
createStore 中如果传递了 enhancer，则会调用它以及它返回的函数，从而创建一个 Store 对象。
这样就把权限开放给调用者了。
applyMiddleware 就是一个内置的创建 enhancer 的方法。
// myRedux.js
/*
createStore(reducer, preloadedState, enhancer)
{ getState, dispatch, subscribe }
*/
function createStore(reducer, preloadedState, enhancer) {
// 约束 reducer 参数类型
if (typeof reducer !== 'function') throw new Error('reducer 必须是函数')
// 判断 enhancer 参数有没有传递
if (typeof enhancer !== 'undefined') {
// 判断 enhancer 是不是一个函数
if (typeof enhancer !== 'function') throw new Error('enhancer 必须是函数')
return enhancer(createStore)(reducer, preloadedState)
}
// store 对象中存储的状态
let currentState = preloadedState
// 存放订阅者函数
const currentListeners = []
// 获取状态
function getState() {
// 形成闭包，避免 state 被释放
return currentState
}
// 触发 Action
function dispatch(action) {
// 判断 action 必须是对象
if (!isPlainObject(action)) throw new Error('action 必须是对象')
// 判断对象中是否有 type 属性
if (typeof action.type === 'undefined') throw new Error('action 中必须要有 type 属性')
// 调用 reducer 函数
currentState = reducer(currentState, action)
// 循环数组 调用订阅者
for (let i = 0; i < currentListeners.length; i++) {
// 获取订阅者
const listener = currentListeners[i]
// 调用订阅者
listener()
}
}
// 订阅状态
function subscribe(listener) {
currentListeners.push(listener)
}
return {
getState,
dispatch,
subscribe
}
}
// 判断 obj 是否是对象
function isPlainObject(obj) {
// redux 源码方式
// 排除基本数据类型和 null
if (typeof obj !== 'object' || obj === null) return false
// 区分数组和对象 原型对象对比的方式
let proto = obj
// 获取 obj 最顶层的原型对象
while(Object.getPrototypeOf(proto) !== null) {
proto = Object.getPrototypeOf(proto)
}
return Object.getPrototypeOf(obj) === proto
}
实例
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<button id="increment">+1button>
<span id="box">0span>
<button id="decrement">-1button>
<script src="./myRedux.js">script>
<script>
function enhancer(createStore) {
return function (reducer, preloadedState) {
let store = createStore(reducer, preloadedState)
let dispatch = store.dispatch
// 对原有的 dispatch 进行增强
function _dispatch(action) {
if (typeof action === 'function') {
// 执行异步操作
return action(dispatch)
}
// 执行同步操作
dispatch(action)
}
return {
...store,
dispatch: _dispatch
}
}
}
function reducer(state, action) {
switch (action.type) {
case 'increment':
return state + 1
case 'decrement':
return state - 1
default:
return state
}
}
// 创建 store
const store = createStore(reducer, 0, enhancer);
// 订阅 store 变化
store.subscribe(function() {
// 获取最新的状态
document.getElementById('box').textContent = store.getState()
})
// 获取+按钮
document.getElementById('increment').onclick = function() {
// 触发 action 让数值+1
// store.dispatch({type: 'increment'})
store.dispatch(function(dispatch) {
setTimeout(() => {
dispatch({
type: 'increment'})
}, 1000);
})
}
// 获取-按钮
document.getElementById('decrement').onclick = function() {
// 触发 acton 让数值-1
store.dispatch({
type: 'decrement'})
}
script>
body>
html>
applyMiddleware
中间件就是允许在 action 触发之后，在 reducer 接收 action 之前，做一些事情。
本质上 redux 中间件其实就是对 dispatch 进行增强。
applyMiddleware 就是通过增强 dispatch 让多个中间件函数进行组合，以达到在触发 action 时，让多个中间件按照顺序进行执行。
中间件函数由三层函数组成 store => next => action => {}。
中间件执行的操作是最里层的函数，外层的两个函数使用来接收参数用的。
next 就是下一个中间件最里层的函数或 store.dispatch 方法。
定义 applyMiddleware
// myRedux.js
/*
createStore(reducer, preloadedState, enhancer)
{ getState, dispatch, subscribe }
*/
function createStore(reducer, preloadedState, enhancer) {
...
}
// 判断 obj 是否是对象
function isPlainObject(obj) {
...
}
function applyMiddleware(...middlewares) {
return function (createStore) {
return function (reducer, preloadedState) {
// 创建 store
const store = createStore(reducer, preloadedState)
// 阉割版的 store
const middlewareAPI = {
getState: store.getState,
dispatch: store.dispatch
}
// 调用中间件的第一层函数 传递 store 函数
const chain = middlewares.map(middleware => middleware(middlewareAPI))
// 调用中间件的第二层函数
const dispatch = compose(...chain)(store.dispatch)
return {
...store,
dispatch
}
}
}
}
function compose(...funcs) {
return function (dispatch) {
// 反向调用第二层函数，返回值就是传递给上一个中间件的 next
for (let i = funcs.length - 1; i >= 0; i--) {
dispatch = funcs[i](dispatch)
}
// 最终返回第一个中间件的第三个函数
return dispatch
}
}
创建中间件
// middlewares\logger.js
function logger(store) {
return function(next) {
return function(action) {
console.log('logger')
next(action)
}
}
}
// middlewares\thunk.js
function thunk(store) {
return function(next) {
return function(action) {
console.log('thunk')
if (typeof action === 'function') {
return action(store.dispatch)
}
next(action)
}
}
}
使用中间件
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<button id="increment">+1button>
<span id="box">0span>
<button id="decrement">-1button>
<script src="./myRedux.js">script>
<script src="./middlewares/logger.js">script>
<script src="./middlewares/thunk.js">script>
<script>
function enhancer(createStore) {
return function (reducer, preloadedState) {
let store = createStore(reducer, preloadedState)
let dispatch = store.dispatch
// 对原有的 dispatch 进行增强
function _dispatch(action) {
if (typeof action === 'function') {
// 执行异步操作
return action(dispatch)
}
// 执行同步操作
dispatch(action)
}
return {
...store,
dispatch: _dispatch
}
}
}
function reducer(state, action) {
switch (action.type) {
case 'increment':
return state + 1
case 'decrement':
return state - 1
default:
return state
}
}
// 创建 store
// const store = createStore(reducer, 0, enhancer);
const store = createStore(reducer, 0, applyMiddleware(logger, thunk));
// 订阅 store 变化
store.subscribe(function() {
// 获取最新的状态
document.getElementById('box').textContent = store.getState()
})
// 获取+按钮
document.getElementById('increment').onclick = function() {
// 触发 action 让数值+1
// store.dispatch({type: 'increment'})
// logger -> thunk --> reducer
store.dispatch(function(dispatch) {
setTimeout(() => {
dispatch({
type: 'increment'})
}, 1000);
})
}
// 获取-按钮
document.getElementById('decrement').onclick = function() {
// 触发 acton 让数值-1
store.dispatch({
type: 'decrement'})
}
script>
body>
html>
bindActionCreators
bindActionCreators 用于将 ActionCreator 函数转换成能够触发 Action 的函数。
ActionCreator 是一个返回 Action 的函数。
bindActionCreators(actionCreators, dispatch)
参数：
actionCreators（functionorobject） - 一个 ActionCreator，或一个 value 是 ActionCreator 的对象dispatch- store.dispatch
返回：
- 如果
actionCreators是一个对象，则返回一个类似的对象，只不过 value 是可以直接触发（dispatch）Action 的函数 - 如果
actionCreators是一个函数，则返回触发 Action 的函数
// ...
const actions = bindActionCreators({
increment, decrement}, store.dispatch)
function increment() {
return {
type: 'increment' }
}
function decrement() {
return {
type: 'decrement' }
}
// 获取+按钮
document.getElementById('increment').onclick = function() {
// 触发 action 让数值+1
store.dispatch(function(dispatch) {
setTimeout(() => {
// dispatch({type: 'increment'})
actions.increment()
}, 1000);
})
}
// 获取-按钮
document.getElementById('decrement').onclick = function() {
// 触发 acton 让数值-1
// store.dispatch({type: 'decrement'})
actions.decrement()
}
// myRedux.js
// ...
function bindActionCreators(actionCreators, dispatch) {
const boundActionCreators = {
}
// 注意：
// 这里如果用 var 声明 key，在调用 boundActionCreators[key] 方法时
// 内部访问的 actionCreators[key] 中的 key 将会是循环结束后的值
for(let key in actionCreators) {
boundActionCreators[key] = function () {
dispatch(actionCreators[key]())
}
}
return boundActionCreators
}
combineReducers
redux 可以将一个大的 reducer 还分成一个个小的 reducer，然后通过 combineReducers 将它们合并成一个大的 reducer。
combineReducers(reducers)
参数：
reducers - 一个由多个不同的 reducer 函数作为 value 的 objec
返回：
一个最终的 reducer 函数，可以将这个 reducer 函数传入 createStore 方法。
合并后的 reducer 可以调用各个子 reducer，并把它们返回的结果合并成一个 state 对象，state 对象的 key 就是 reducers 中的 key。
function counterReducer(state, action) {
switch (action.type) {
case 'increment':
return state + 1
case 'decrement':
return state - 1
default:
return state
}
}
const rootReducer = combineReducers({
counter: counterReducer
})
// 创建 store
// const store = createStore(reducer, 0, applyMiddleware(logger, thunk));
const store = createStore(rootReducer, {
counter: 0 }, applyMiddleware(logger, thunk));
// 订阅 store 变化
store.subscribe(function() {
// 获取最新的状态
document.getElementById('box').textContent = store.getState().counter
})
// myRedux.js
function combineReducers(reducers) {
// 1. 检查 reducer 类型 必须是函数
const reducerKeys = Object.keys(reducers)
for (let i = 0; i < reducerKeys.length; i++) {
const key = reducerKeys[i]
if (typeof reducers[key] !== 'function') throw new Error('reducer 必须是函数')
}
// 2. 调用每个小的 reducer 将每个小的 reducer 中返回的状态存储在一个新的大的对象中
return function (state, action) {
const nextState = {
}
for (let i = 0; i < reducerKeys.length; i++) {
const key = reducerKeys[i]
const reducer = reducers[key]
const previousStateForKey = state[key]
nextState[key] = reducer(previousStateForKey, action)
}
return nextState
}
}