从一个主力语言是JavaScript的开发者角度来分析俄罗斯方块，不同形状的方块的下落、移动、消除其实是 复杂的状态管理和组件通信。这不刚好就是React和Redux的射程范围嘛！（并没有说它们适合游戏开发）

我将通过这篇博文拆解实现俄罗斯方块的一些核心逻辑，以及Redux Tool Kit的使用。

你可以在我的Github仓库上找到项目代码，也可以通过Github Page来试玩这个游戏。

本文涉及的技术

• JavaScript数组高阶函数
• 使用Redux Tool Kit对React单页面项目进行状态管理
• 使用requestAnimationFrame实现动画效果

文件结构

项目总结构

|-- src
    |-- App.js
	|-- index.js
	|-- store.js
	|-- features/
		|-- game/
			|-- components/
			|-- game-slice.js
	|-- styles/
	|-- utils/

我是通过create-react-app创建的项目，游戏界面及功能所有代码都在src路径下：

• 我保留了index.js和App.js，同时添加了store.js来处理Redux store的配置代码；
• 样式全部放在了styles文件夹中，游戏运行的核心逻辑放到了utils文件夹中；
• Redux官方推荐在使用RTK（Redux Tool Kit）时，创建一个features目录，并把不同的功能模块放在这个目录下，每一个功能模块包含自己的组件、reducer和其他相关文件（如与后端通信的代码），所以我在features目录下创建了game文件夹，并在其下创建了components目录和game-slice.js。

组件结构

我规划的组件包括：

|-- components/
	|-- Board.js
	|-- Control.js
	|-- MessagePopup.js
	|-- NextBlock.js
	|-- ScoreBoard.js
	|-- Square.js

• Board.js是主游戏区
• Control.js是按钮控制面板
• MessagePopup.js是游戏结束时弹出的消息框
• NextBlock.js是下一个形状提示框
• ScoreBoard.js显示当前分数和历史最高分数
• Square.js是组成主游戏区和提示框的小方块

核心UI组件搭建的逻辑

游戏区域的实现

主游戏区框架的实现

将主游戏区看作一个10*18的网格，可以通过单项数据为0的二维数组实现：

//src/utils/index.js

const boardDefault = () => {
    const rows = 18; //共18行
	const cols = 10; //共10列	
	const array = Array.from(Array(rows), () => Array(cols).fill(0));
	return array;
};

注：在示意图中，我标注了x和y象限，因为之后会使用x和y的值来判断形状在主游戏区的位置。

形状的实现

既然主游戏区可以通过数组来实现，那么不同形状的方块也可以通过数组来实现：

设定每一种形状都用一个4*4的网格作为容器：

[

	[0, 0, 0, 0],
	[0, 0, 0, 0],
	[0, 0, 0, 0],
	[0, 0, 0, 0],

],

在俄罗斯方块游戏中，不同的形状的颜色不同，所以可以用整数1,2,3,4...来区分它们。

使用整数的另一个好处是可以和样式绑定，先提前设置好每个颜色对应的编号：

:root {
	--color-0: #282c34;
	--color-1: #ff6600;
	--color-2: #eec900;
	...
	--color-7: #ff0000;
}

.color-0 {
	background-color: var(--color-0);
}

.color-1 {
	background-color: var(--color-1);
}

...
  
.color-7 {
	background-color: var(--color-7);
}

然后就可以通过数字1,2,3,4...在前文的4*4网格数组中的排列来表达不同的形状了，需要注意的是每个形状还有旋转后的样式也要考虑进去。

比方说一个长条形状及它旋转后可以表示为：

//I

[
	[
		[0, 0, 0, 0],
		[1, 1, 1, 1],
		[0, 0, 0, 0],
		[0, 0, 0, 0],
	],

	[
		[0, 1, 0, 0],
		[0, 1, 0, 0],
		[0, 1, 0, 0],
		[0, 1, 0, 0],
	],
],

• 把单个形状及其旋转后的样式放在同一个数组中，引用时就可以通过索引号来获得形状的旋转效果。
• 再把所有形状的数组汇总到一个数组中，这样通过索引号就把表示颜色的数字和形状挂钩了。

形状到主游戏区的映射

我们完成了主游戏区和形状分别的实现，那么当游戏进行时，如何把形状映射到主游戏区呢？

在React中，每一次渲染都相当于一次快照，那么就可以把游戏进行时，形状在主游戏区域的每一次移动都看作独立的一次形状数组到主游戏区数组的映射：

具像化我们映射过程就是从以上第一幅图到第二幅图。

代码实现如下：

//src/features/game/components/Board.js

//这里的board变量是10*18的由0组成的二位数组
const boardSquare = board.map((rowArray, row) => {
	return rowArray.map((square, col) => {
	//col（0-9）row（0-17)
	const blockX = col - x;
	const blockY = row - y;
	//square为0
	let color = square;
	//生成移动的block的颜色
	if (
		blockX >= 0 &&
		blockX < block.length &&
		blockY >= 0 &&
		blockY < block.length
	) {
    //这里的block变量引用了从函数外部取得的表示形状的数组
		color = block[blockY][blockX] === 0 ? color : blockColor;
	}
	//生成key
	const k = row * board[0].length + col;
	return <Square key={k} color={color} />;
	});
});

让我们看看上面代码发生了什么：

• x,y是形状起始的横轴（行）和纵轴（列）的坐标，我设定的初始值为x=4, y=-5，这样每一个形状的初始位置就位于主游戏区差不多正上方，随着形状的移动，这两个值也会发生变化；
• boardSquare函数实际上做了两件事：将我们用数组表达的10*8主游戏区展示到UI；根据主游戏区纵坐标（0-17）、横坐标（0-9）与x、y的差值来定位，将形状数组映射到主游戏区；
• 首先通过一组嵌套结构的Array.map()的方法，遍历主游戏区所有网格，并将所有网格的color设置为0；
• 在遍历主游戏区的同时，通过blockX和blockY坐标来锁定位于形状数组内部的方块，如果它的值不为0的话，就返回对应数字的颜色；
• 因为React要求遍历的组件包含一个独一无二的key，所以通过row * board[0].length + col生成key。

判断边界的逻辑

移动范围边界

形状在主游戏区的移动遵守一定的规则：

1. 左右下边都不可越界
2. 如果在主游戏区碰到其他的形状，也不得移动。

我们只用检查形状内部每一个方块是否符合以上规则，就可以判断形状是否可以移动了。

此处还需要注意的是，每一形状都被放置在4*4的网格中，所以要排除方块值为0情况：

//src/utils/index.js

const canMoveTo = (shape, board, x, y, rotation) => {
	const currentShape = shapes[shape][rotation];
	for (let row = 0; row < currentShape.length; row++) {
		for (let col = 0; col < currentShape[row].length; col++) {
			if (currentShape[row][col] !== 0) {
				const proposedX = col + x;
				const proposedY = row + y;
			if (proposedY < 0) {
				continue;
				}
			const possibleRow = board[proposedY];
			if (possibleRow) {
				if (
					possibleRow[proposedX] === undefined ||
					possibleRow[proposedX] !== 0
					) {
						return false;
					}
				} else {
				//超越底线
						return false;
					}
				}
			}
		}
	//默认可以移动
	return true;
};

• 使用canMoveTo函数来判断是否可以移动，函数接受shape（形状数组）、board（主游戏区数组）、x,y（形状定位坐标）、rotation（旋转索引号）作为参数，返回布尔值。
• 首先默认可以移动；
• 利用两个嵌套Array.map()遍历形状数组内部的方块，如果方块的值为非0，就根据x和y的值来判断方块位于游戏主区的位置，即proposedX和proposedY；
• 因为形状的初始情况是位于游戏主区上方，不在主区内，所以存在proposedY小于0的情况，这个时候继续遍历就好；
• 根据propsedY可以推断出方块位于主游戏区的行数possibleRow，如果不存在possibleRow的话，则说明方块已经超越了主游戏区的底边，返回false；
• 用possibleRow[proposedX]来定位形状方块位于主游戏区该行的哪一个方块，如果值不为0或者为undefined的话，说明主游戏区上已经有其他形状的方块或者超越主游戏区左右边界，返回false。

消除条件

当主游戏区一整行填满形状方块就会消除，放在数组的框架下思考，就是检查一行是否全不为0。如果符合条件就删除一整行，然后在数组最开始重新添加一行：

//src/utils/index.js

const checkRows = (board) => {
	for (let row = 0; row < board.length; row++) {
	//检查是否一整行都不为'0'
		if (board[row].indexOf(0) === -1) {
		//如果是，删除这一行
				board.splice(row, 1); 
				//同时在数组最开始添加一行新的数组
				board.unshift(Array(10).fill(0));
			}
	}
}

状态管理

使用Redux Tool Kit

在这个应用中，我使用Redux Tool Kit（后文简称RTK）来实现状态管理。

RTK对比传统的Redux来说的优势在于：

1. 更少的样板代码
2. RTK通过Immer库来实现不可变数据，提高应用程序的性能。

创建Slice

在RTK中，reducer和action集合到slice中，可以通过引用createSlice来实现：

//src/features/game/game-slice.js

import {createSlice} from '@reduxjs/toolkit'

const gameSlice = createSlice({
	name:'game',
	initialState: {...},
	reducer: {
		rotate:(state, action) =>{
			...
			},
		moveRight: (state, action) =>{
			...
			},
			...
		},
})

export const {rotate, moveRight} = gameSlice.actions
export default gameSlice.reducer;

注：在传统方式中若要修改不可变数据，需要手动复制原始数据，并在副本上进行修改，由于immer库的存在，在编写reducer的时候，可以直接修改state，详细代码可以查看github仓库。

创建store

//src/store.js

import { configureStore } from '@reduxjs/toolkit';
import gameReducer from './features/game/game-slice';

export const store = configureStore({ reducer: { game: gameReducer}})

将数据提供给应用

//src/index.js

import { Provider } from 'react-redux';
import { store } from './store';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
	<React.StrictMode>
		<Provider store={store}>
			<App />
		</Provider>
	</React.StrictMode>
);

使用数据

//src/features/game/components/Control.js

import { useSelector, useDispatch } from 'react-redux';
import { rotate } from '../game-slice';

export default function Controls() {
	const dispatch = useDispatch();
	const isRunning = useSelector((state) => state.game.isRunning);
    const gameOver = useSelector((state) => state.game.gameOver);

	const handleRotate = () => {
		if (!isRunning || gameOver) return;
		dispatch(rotate());
	};

	return (
		<div className="controls">
		{/* rotation */}
			<button
				disabled={!isRunning || gameOver}
				className="control-button"
				onClick={handleRotate}
			>						
			 Rotate
			</button>

下落动画的实现

Delta Time

Delta time（Δt）是一个计算两个时间点之间经过的时间差的量。在游戏开发中，delta time 指的是每一帧之间的时间间隔。

实现方块的下落动画，会运用到delta time。

这里我们需要计算两次调用requestAnimationFrame的时间差的值，如果累计差值比我们设定的游戏速度要大，就触发moveDownaction。

形状的下落实际上就是在一定时间间隔下更新画面（触发moveDown这个action），不就是定时器嘛！

使用requestAnimationFrame、useRef和useEffect实现定时器的原因

• requestAnimationFrame

一般想到定时器会想到setInterval和setTimeout，但实际上使用requestAnimationFrame的性能更好。

这是因为requestAnimationFrame更符合屏幕的刷新率，通常屏幕的刷新率是60Hz，也就意味着浏览器每间隔16.7毫秒（1000毫秒/60）就会更新一次页面。requestAnimationFrame的回调函数会在浏览器准备好下一帧时调用，从而确保每一帧都能够在屏幕刷新之前完成绘制。

但setTimeout和setInterval的时间并不精准，可能会出现卡顿、延迟等性能问题。

• useRef

React中的函数组件就像一个快照，每次渲染完成后值就会丢失。所以如果需要让函数“记住”值的话，就需要使用额外的钩子。

在俄罗斯方块游戏中，我们需要对形状下落的帧进行记录，这个值不受组件的生命周期影响，因此需要useRef。

• useEffect

游戏中只需要在特定时间调用控制下落的函数，并且这个过程是Board.js组件的一个副作用，因此需要使用useEffect。

//src/utils/useTimer.js

import { useEffect, useRef } from 'react';
import { useDispatch } from 'react-redux';

export function useTimer(flagVal, benchmark, func) {
	const requestRef = useRef();
	const lastUpdateTimeRef = useRef(0);
	const progressTimeRef = useRef(0);
	
	const dispatch = useDispatch();

	const update = (time) => {
		requestRef.current = requestAnimationFrame(update);
		if (!flagVal) return;
		if (!lastUpdateTimeRef.current) {
			lastUpdateTimeRef.current = time;
		}
	
		const deltaTime = time - lastUpdateTimeRef.current;
		progressTimeRef.current += deltaTime;
	
		if (progressTimeRef.current > benchmark) {
		dispatch(func());
		progressTimeRef.current = 0;
		}
		lastUpdateTimeRef.current = time;
	};

	useEffect(() => {
		requestRef.current = requestAnimationFrame(update);
		return () => cancelAnimationFrame(requestRef.current);
	}, [flagVal]);
}

• 使用useRef创建了三个引用变量requestRef、lastUpdateTimeRef和progressTimeRef，用于存储定时器的状态和进度。
• requestRef用于存储当前动画帧的引用， lastUpdateTimeRef用于存储上一次更新的时间戳，progressTimeRef用于存储已经过去的时间。
• 在update函数中实现定时器逻辑。
• 首先使用requestAnimationFrame来获取下一帧的引用，并存储到requestRef.current中，以实现流畅的动画效果；
• 然后通过flagVal的值，来决定是否退出函数；
• 接着如果没有lastUpdateTimeRef.current的值，就将当前的时间戳(time)存储到里面。
• 创建deltaTime，它的值为当前时间戳和lastUpdateTimeRef.current的时间差，将每次更新得到的deltaTime都添加到progressTimeRef.current中，记录累计过去的时间；
• 如果这个累计值大于我们设定的时间间隔benchmark，就执行传入的函数，执行完毕后，将累计时间清零；
• 最后将当前时间戳存储在lastUpdateTimeRef.current中，以便下一次调用时使用。
• 在使用这个定时器时，我们传入应用的状态属性isRunning作为flagVal来判断是否需要退出函数，speed作为benchmark来和累积值做对比，控制形状的下移动画的速度，moveDown作为func来实现方块下移的动作。

总结

本项目通过数组实现了基本的游戏静态画面，动画部分使用了requestAnimationFrame，游戏复杂的状态管理借助了更简洁的RTK。

如果你仔细观察项目代码，会发现我还使用了第三方库Redux Persist来存储最高分数。

如果你想要动手实验一下我在文章中提到的逻辑和状态管理，我准备了starter仓库，它包含了基础的框架和样式，你可以在此基础上搭建属于你的俄罗斯方块，当然你也可以在我的项目基础上添加新的内容，如不同的关卡（下落速度不同），将按键和键盘绑定等。

希望阅读这篇文章让你有所收获，祝你实验愉快！

代码仓库

• 完整项目
• 仅UI部分
• 试玩

刚接触 Redux 可能会被吓到，你可能需要一段时间才能适应它，而且可能最终要翻看以前的代码才能找到解决问题的办法。

常遭人诟病的是，Redux 需要使用很多样板代码来管理应用状态。确实如此——在小型应用中使用 Redux 犹如拿大炮打蚂蚁。在 React 项目中，还有其他可用方案，如属性（prop）钻取和上下文（context）；Vue项目中可以使用 VueX；Angular 项目中可以使用 NGRX。

在 React 应用中，Redux 解决的主要问题是，将应用的所有状态保存在一个全局的 store 中，而不是通过（单向的）属性传递来管理状态。这样就可以在任意需要的地方访问到全局状态了，非常方便！

本文会教你使用 Redux 实现一个 React 计数器应用，让你有足够的基础知识在项目中使用 Redux。

项目设置

首先，运行 npm i redux react-redux 命令，安装 redux 和 react-redux。Redux 是独立的包，react-redux 则提供了一些方便使用的钩子（hook）。

创建目录和文件

接下来，创建 action 和 reducer。顾名思义，action 就是决定要干什么的对象。另一方面，reducer 会检查执行了哪个 action 并根据 action 更新 state，它接收 state 和 action 作为参数。

我喜欢创建一个名为 Redux 的目录，再在其中创建创建 actions 和 reducers 目录，分别保存 action 和 reducer 文件。

在 reducers 目录中创建 counterReducer.js 文件。很多人通常会使用 switch 语句来实现 reducer，不过你也可以使用 if 语句。示例中会使用 switch。

所以，在 counterReducer.js 中写入以下代码：

// src/Redux/reducers/counterReducer.js
const counterReducer = (state = 1, action) => {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    case "DECREMENT":
      return state - 1;
    case "RESET":
      return (state = 0);
    default:
      return state;
  }
};
export default counterReducer;

这里我将 state 初始值硬编码为 1，你也可以选择从 0 开始计数。

在 switch 语句中，INCREMENT 表示让计数器加 1，DECREMENT 表示让计数器减 1，RESET 表示将计数器重置为 0。

按照惯例会将 action 的类型（action.type）全部大写，但不作强制要求——大小写都行。需要把 counterReducer 导出，以便在其他文件中使用它。

加入虚拟的身份验证

为计数器应用添加虚拟的身份验证，让应用功能更进一步。我会在那里向你展示一个关于我的小秘密。所以，除了 counterReducer，还要创建一个 authReducer，其代码如下：

// src/Redux/reducers/authReducer.js
const authReducer = (state = false, action) => {
  switch (action.type) {
    case "LOG_IN":
      return true;
    case "LOG_OUT":
      return false;
    default:
      return state;
  }
};
export default authReducer;

在 authReducer 中，state 被初始化为 false，LOG_IN 会将它设置为 true，LOG_OUT 会将它设置为 false。

如何使用 combineReducer 辅助函数

因为有多个 reducer，所以需要引入 Redux 提供的 combineReducer 辅助函数。这个函数可以将多个 reducer 合并成单个 reducer，以便传入 createStore API。不必为不了解 createStore API 而困惑——我稍后会介绍。

combineReducer 使用方式如下：

combineReducer({reducer-a, reducer-b, reducer-c})

在 reducer 目录中创建 index 文件（译注：文中提及的默认都是 JavaScript 文件，此处指的是 index.js），引入 combineReducer 和 reducer，并把这些 reducer 组合在一起。

其代码如下：

// src/Redux/reducers/index.js
import counterReducer from "./counterReducer";
import authReducer from "./authReducer";
import {combineReducers} from "redux";

const allReducers = combineReducers({
    counter: counterReducer,
    auth: authReducer,
});
export default allReducers;

如何创建全局 Store

接下来要做的是创建一个 store，我喜欢在 React 的 index 文件中创建它。

需要先从 Redux 中引入 createStore API：

import { createStore } from "redux";

还需要引入已经组合好的 reducer，然后就可以使用它们来创建 store 了。

为了让我们的计数器功能可用，必须把 Redux 连接到应用中。

在 index 文件里，首先从 react-redux 引入 Provider，并用它包裹整个组件树。Provider 将全局的 state 连接到应用中。Provider 接收一个名为 store 的参数，我们在其中传入之前创建的 store。

index 文件的代码如下：

// src/index.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { createStore } from "redux";
import allReducers from "./redux/reducers";
import { Provider } from "react-redux";

// 创建 store
const store = createStore(
  allReducers,
);
ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

如何定义 Action

为了实现增加计数、减少计数、登入、登出，我们必须回到 actions 目录，定义相应的 action，并将它们导出。dispatch 函数可以执行我们定义的 action。

我在 reducer 文件中实现了 INCREMENT、DECREMENT、RESET、LOG_IN 和 LOG_OUT action 的逻辑。actions 目录中的 index 文件里要以同样的标识符（即 type）来使用它们。

actions 目录中，index 文件的代码如下：

// src/Redux/actions/index.js
export const increment = () => {
  return {
    type: "INCREMENT",
  };
};

export const decrement = () => {
  return {
    type: "DECREMENT",
  };
};

export const reset = () => {
  return {
    type: "RESET",
  };
};

export const logIn = () => {
  return {
    type: "LOG_IN",
  };
};

export const logOut = () => {
  return {
    type: "LOG_OUT",
  };
};

如何获取 Reducer 以及 Dispatch Action

从 react-redux 中引入 useSelector（在其中可以访问整个 state），以便获取 counterReducer。为了看到我之前说过的关于我的小秘密，我们还需要获取 authReducer。

我会在 App.js 文件中操作：

import { useSelector } from "react-redux";

我们需要引入定义好的 action，并从 react-redux 引入 useDispatch 钩子，以便 dispatch action。

import { useDispatch } from "react-redux";

现在 useDispatch 钩子和其它东西都是可用的，我们需要设置“增加”、“减少”、“重置”、“登入”和“登出”按钮。

需要为每个按钮绑定点击事件处理程序，来 dispatch 相应的 action。现在 app.js 的完整代码如下：

// src/App.js
import "./App.css";
import { useSelector, useDispatch } from "react-redux";
import {
  decrement,
  increment,
  reset,
  logIn,
  logOut,
} from "./redux/actions/index";

function App() {
  const counter = useSelector((state) => state.counter);
  const auth = useSelector((state) => state.auth);
  const dispatch = useDispatch();

  return (
    <div className="App">
      <h1>
         Hello World <br /> A little Redux Project. YaaY!
      </h1>
      <h3>Counter</h3>
      <h3>{counter}</h3>
      <button onClick={() => dispatch(increment())}>Increase</button>
      <button onClick={() => dispatch(reset())}>Reset</button>
      <button onClick={() => dispatch(decrement())}>Decrease</button>

      <h2>For Logged in users only</h2>
      <p>Log in to see a secret about me</p>
      <button onClick={() => dispatch(logIn())}>Login</button>
      <button onClick={() => dispatch(logOut())}>Logout</button>
      {auth ? (
        <div>
          <p>
            I don't know more than 50% of redux. But if you know 50% of it, you're like a Superman.
          </p>
        </div>
      ) : (
        ""
      )}
    </div>
  );
}

export default App;

最终结果如下：

希望你能找到那个关于我的小秘密。

总结

感谢你的阅读，希望你通过本文能够对 Redux 有基本的了解，进而使用它开发一些自己的东西。

想和我联系的话，可以关注我的 Twitter，我经常会在上面讨论编码以及 web 开发相关的话题。

原文：Learn Redux by Making a Counter Application，作者：Kayode, Kolade Christopher

• Action
• Reducer
• Store

其中 Action 和 Store 都非常好理解，我们可以直接按照其字面意思，将他们理解为动作和储存。

Action 表示应用中的各类动作或操作，不同的操作会改变应用相应的 state 状态，说白了就是一个带 type 属性的对象。

Store 则是我们储存state 的地方。我们通过 redux 当中的 createStore 方法来创建一个 store，它提供 3 个主要的方法，在这里我们可以模拟一下 createStore 的源码：

// 以下代码示例来自redux官方教程
const createStore = (reducer) => {
  let state;
  let listeners = [];
  // 用来返回当前的state
  const getState = () => state;
  // 根据action调用reducer返回新的state并触发listener
  const dispatch = (action) => {
      state = reducer(state, action);
      listeners.forEach(listener => listener());
    };
  /* 这里的subscribe有两个功能
   * 调用 subscribe(listener) 会使用listeners.push(listener)注册一个listener
   * 而调用 subscribe 的返回函数则会注销掉listener
   */
  const subscribe = (listener) => {
      listeners.push(listener);
      return () => {
        listeners = listeners.filter(l => l !== listener);
      };
    };

  return { getState, dispatch, subscribe };
};

那么剩下的这个 reducer 连翻译都很难翻译的东西应该怎么理解呢？

我们注意到 redux 的官方文档里专门有一句对 reducer 命名的解释：

It's called a reducer because it's the type of function you would pass to Array.prototype.reduce(reducer, ?initialValue)

中文版的文档把这一句话翻译成了：

之所以称作 reducer 是因为它将被传递给 Array.prototype.reduce(reducer, ?initialValue) 方法。

我们要注意到这里的中文翻译理解其实是错误的。原文的本意并不是说 redux 里的 reducer 会被传入到 Array.prototype.reduce 这个方法中。真的要翻译的话，应该翻译为：

之所以将这样的函数称之为 reducer，是因为这种函数与被传入 Array.prototype.reduce(reducer, ?initialValue) 的回调函数属于相同的类型。

为什么这么讲呢？我们来看一下 array 使用 reduce 方法的具体例子：

// 以下代码示例来自 MDN JavaScript 文档

/* 这里的callback是和reducer非常相似的函数
 * arr.reduce(callback, [initialValue])
 */

var sum = [0, 1, 2, 3].reduce(function(acc, val) {
  return acc + val;
}, 0);
// sum = 6

/* 注意这当中的回调函数 (prev, curr) => prev + curr
 * 与我们redux当中的reducer模型 (previousState, action) => newState 看起来是不是非常相似呢
 */
[0, 1, 2, 3, 4].reduce( (prev, curr) => prev + curr );

我们再来看一个简单的具体的 reducer 的例子：

// 以下代码示例来自redux官方教程

// reducer接受state和action并返回新的state
const todos = (state = [], action) => {
  // 根据不同的action.type对state进行不同的操作，一般都是用switch语句来实现，当然你要用if...else我也拦不住你
  switch (action.type) {
    case 'ADD_TODO':
      return [
        // 这里是ES7里的对象展开运算符语法
        ...state,
        {
          id: action.id,
          text: action.text,
          completed: false
        }
      ];
    // 不知道是什么action类型的话则返回默认state
    default:
      return state;
  }
};

如果非要翻译 reducer 的话，可以将其翻译为缩减器或者折叠器？

为了进一步加深理解，我们再了解一下 reduce 是什么东西，这个名词其实是函数式编程当中的一个术语，在更多的情况下，reduce 操作被称为 Fold 折叠（下图来自维基百科）。

直观起见，我们还是拿 JavaScript 来理解。reduce 属于一种高阶函数，它将其中的回调函数 reducer 递归应用到数组的所有元素上并返回一个独立的值。这也就是“缩减”或“折叠”的意义所在了。

总而言之一句话，redux 当中的 reducer 之所以叫做 reducer，是因为它和 Array.prototype.reduce 当中传入的回调函数非常相似。

当然，如果你认为这种命名不完美容易产生歧义，你完全可以去给 redux 提交一个 PR，提供一种更加恰当的命名方式。

有任何好的意见或者是建议欢迎在评论区参与讨论，如果文中有任何错误也欢迎在评论区批评指正。

把我的redux源码仓库 git clone https://github.com/lxchuan12/redux-analysis.git克隆下来，顺便star一下我的redux源码学习仓库 (opens new window)^_^。跟着文章节奏调试和示例代码调试，用chrome动手调试印象更加深刻。文章长段代码不用细看，可以调试时再细看。看这类源码文章百遍，可能不如自己多调试几遍。也欢迎加我微信交流ruochuan12。

2. git subtree 管理子仓库

写了很多源码文章，vuex、axios、koa等都是使用新的仓库克隆一份源码在自己仓库中。 虽然电脑可以拉取最新代码，看到原作者的git信息。但上传到github后。读者却看不到原仓库作者的git信息了。于是我找到了git submodules 方案，但并不是很适合。再后来发现了git subtree。

简单说下 npm package和git subtree的区别。 npm package是单向的。git subtree则是双向的。

具体可以查看这篇文章@德来（原有赞大佬）：用 Git Subtree 在多个 Git 项目间双向同步子项目，附简明使用手册(opens new window)

学会了git subtree后，我新建了redux-analysis项目后，把redux源码4.x（截止至2020年06月13日，4.x分支最新版本是4.0.5，master分支是ts，文章中暂不想让一些不熟悉ts的读者看不懂）分支克隆到了我的项目里的一个子项目，得以保留git信息。

对应命令则是：

git subtree add --prefix=redux https://github.com/reduxjs/redux.git 4.x

3. 调试 redux 源码准备工作

之前，我在知乎回答了一个问题若川：一年内的前端看不懂前端框架源码怎么办？ (opens new window)推荐了一些资料，阅读量还不错，大家有兴趣可以看看。主要有四点：
1.借助调试
2.搜索查阅相关高赞文章
3.把不懂的地方记录下来，查阅相关文档
4.总结

看源码调试很重要，所以我的每篇源码文章都详细描述（也许有人看来是比较啰嗦...）如何调试源码。

断点调试要领：
赋值语句可以一步按F10跳过，看返回值即可，后续详细再看。
函数执行需要断点按F11跟着看，也可以结合注释和上下文倒推这个函数做了什么。
有些不需要细看的，直接按F8走向下一个断点
刷新重新调试按F5

调试源码前，先简单看看 redux 的工作流程，有个大概印象。

3.1 rollup 生成 sourcemap 便于调试

修改rollup.config.js文件，output输出的配置生成sourcemap。

// redux/rollup.config.js 有些省略
const sourcemap = {
  sourcemap: true,
};

output: {
    // ...
    ...sourcemap,
}

安装依赖

git clone http://github.com/lxchuan12/redux-analysis.git
cd redux-analysi/redux
npm i
npm run build
# 编译结束后会生成 sourcemap .map格式的文件到 dist、es、lib 目录下。

仔细看看redux/examples目录和redux/README。

这时我在根路径下，新建文件夹examples，把原生js写的计数器redux/examples/counter-vanilla/index.html，复制到examples/index.html。同时把打包后的包含sourcemap的redux/dist目录，复制到examples/dist目录。

修改index.html的script的redux.js文件为dist中的路径。

为了便于区分和调试后续html文件，我把index.html重命名为index.1.redux.getState.dispatch.html。

# redux-analysis 根目录
# 安装启动服务的npm包
npm i -g http-server
cd examples
hs -p 5000

就可以开心的调试啦。可以直接克隆我的项目git clone http://github.com/lxchuan12/redux-analysis.git。本地调试，动手实践，容易消化吸收。

4. 通过调试计数器例子的学习 redux 源码

接着我们来看examples/index.1.redux.getState.dispatch.html文件。先看html部分。只是写了几个 button，比较简单。

<div>
    <p>
    Clicked: <span id="value">0</span> times
    <button id="increment">+</button>
    <button id="decrement">-</button>
    <button id="incrementIfOdd">Increment if odd</button>
    <button id="incrementAsync">Increment async</button>
    </p>
</div>

js部分，也比较简单。声明了一个counter函数，传递给Redux.createStore(counter)，得到结果store，而store是个对象。render方法渲染数字到页面。用store.subscribe(render)订阅的render方法。还有store.dispatch({type: 'INCREMENT' })方法，调用store.dispatch时会触发render方法。这样就实现了一个计数器。

function counter(state, action) {
    if (typeof state === 'undefined') {
        return 0
    }

    switch (action.type) {
        case 'INCREMENT':
        return state + 1
        case 'DECREMENT':
        return state - 1
        default:
        return state
    }
}

var store = Redux.createStore(counter)
var valueEl = document.getElementById('value')

function render() {
    valueEl.innerHTML = store.getState().toString()
}
render()
store.subscribe(render)

document.getElementById('increment')
.addEventListener('click', function () {
    store.dispatch({ type: 'INCREMENT' })
})

// 省略部分暂时无效代码...

思考：看了这段代码，你会在哪打断点来调试呢。

// 四处可以断点来看
// 1.
var store = Redux.createStore(counter)
// 2.
function render() {
valueEl.innerHTML = store.getState().toString()
}
render()
// 3.
store.subscribe(render)
// 4.
store.dispatch({ type: 'INCREMENT' })

图中的右边Scope，有时需要关注下，会显示闭包、全局环境、当前环境等变量，还可以显示函数等具体代码位置，能帮助自己理解代码。

断点调试，按F5刷新页面后，按F8，把鼠标放在Redux和store上。

可以看到Redux上有好几个方法。分别是：

• __DO_NOT_USE__ActionTypes: {INIT: "@@redux/INITu.v.d.u.6.r", REPLACE: "@@redux/REPLACEg.u.u.7.c", PROBE_UNKNOWN_ACTION: ƒ}
• applyMiddleware: ƒ applyMiddleware() 函数是一个增强器，组合多个中间件，最终增强store.dispatch函数，dispatch时，可以串联执行所有中间件。
• bindActionCreators: ƒ bindActionCreators(actionCreators, dispatch) 生成actions，主要用于其他库，比如react-redux。
• combineReducers: ƒ combineReducers(reducers) 组合多个reducers，返回一个总的reducer函数。
• compose: ƒ compose() 组合多个函数，从右到左，比如：compose(f, g, h) 最终得到这个结果 (...args) => f(g(h(...args))).
• createStore: ƒ createStore(reducer, preloadedState, enhancer) 生成 store 对象

再看store也有几个方法。分别是：

• dispatch: ƒ dispatch(action) 派发动作，也就是把subscribe收集的函数，依次遍历执行
• subscribe: ƒ subscribe(listener) 订阅收集函数存在数组中，等待触发dispatch依次执行。返回一个取消订阅的函数，可以取消订阅监听。
• getState: ƒ getState() 获取存在createStore函数内部闭包的对象。
• replaceReducer: ƒ replaceReducer(nextReducer) 主要用于redux开发者工具，对比当前和上一次操作的异同。有点类似时间穿梭功能。
• Symbol(observable): ƒ observable()

也就是官方文档redux.org.js (opens new window)上的 API。

暂时不去深究每一个API的实现。重新按F5刷新页面，断点到var store = Redux.createStore(counter)。一直按F11，先走一遍主流程。

4.1 Redux.createSotre

createStore 函数结构是这样的，是不是看起来很简单，最终返回对象store，包含dispatch、subscribe、getState、replaceReducer等方法。

// 省略了若干代码
export default function createStore(reducer, preloadedState, enhancer) {
    // 省略参数校验和替换
    // 当前的 reducer 函数
    let currentReducer = reducer
    // 当前state
    let currentState = preloadedState
    // 当前的监听数组函数
    let currentListeners = []
    // 下一个监听数组函数
    let nextListeners = currentListeners
    // 是否正在dispatch中
    let isDispatching = false
    function ensureCanMutateNextListeners() {
        if (nextListeners === currentListeners) {
        nextListeners = currentListeners.slice()
        }
    }
    function getState() {
        return currentState
    }
    function subscribe(listener) {}
    function dispatch(action) {}
    function replaceReducer(nextReducer) {}
    function observable() {}
    // ActionTypes.INIT @@redux/INITu.v.d.u.6.r
    dispatch({ type: ActionTypes.INIT })
    return {
        dispatch,
        subscribe,
        getState,
        replaceReducer,
        [$$observable]: observable
    }
}

4.2 store.dispatch(action)

function dispatch(action) {
    // 判断action是否是对象，不是则报错
    if (!isPlainObject(action)) {
      throw new Error(
        'Actions must be plain objects. ' +
          'Use custom middleware for async actions.'
      )
    }
    // 判断action.type 是否存在，没有则报错
    if (typeof action.type === 'undefined') {
      throw new Error(
        'Actions may not have an undefined "type" property. ' +
          'Have you misspelled a constant?'
      )
    }
    // 不是则报错
    if (isDispatching) {
      throw new Error('Reducers may not dispatch actions.')
    }

    try {
      isDispatching = true
      currentState = currentReducer(currentState, action)
    } finally {
        // 调用完后置为 false
      isDispatching = false
    }
    //  把 收集的函数拿出来依次调用
    const listeners = (currentListeners = nextListeners)
    for (let i = 0; i < listeners.length; i++) {
      const listener = listeners[i]
      listener()
    }
    // 最终返回 action
    return action
  }

var store = Redux.createStore(counter)

上文调试完了这句。

继续按F11调试。

function render() {
    valueEl.innerHTML = store.getState().toString()
}
render()

4.3 store.getState()

getState函数实现比较简单。

function getState() {
    // 判断正在dispatch中，则报错
    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.'
        )
    }
    // 返回当前的state
    return currentState
}

4.4 store.subscribe(listener)

订阅监听函数，存放在数组中，store.dispatch(action)时遍历执行。

function subscribe(listener) {
    // 订阅参数校验不是函数报错
    if (typeof listener !== 'function') {
      throw new Error('Expected the listener to be a function.')
    }
    // 正在dispatch中，报错
    if (isDispatching) {
      throw new Error(
        '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#subscribelistener for more details.'
      )
    }
    // 订阅为 true
    let isSubscribed = true

    ensureCanMutateNextListeners()
    nextListeners.push(listener)

    // 返回一个取消订阅的函数
    return function unsubscribe() {
      if (!isSubscribed) {
        return
      }
      // 正在dispatch中，则报错
      if (isDispatching) {
        throw new Error(
          'You may not unsubscribe from a store listener while the reducer is executing. ' +
            'See https://redux.js.org/api-reference/store#subscribelistener for more details.'
        )
      }
      // 订阅为 false
      isSubscribed = false

      ensureCanMutateNextListeners()
    //   找到当前监听函数
      const index = nextListeners.indexOf(listener)
    //   在数组中删除
      nextListeners.splice(index, 1)
      currentListeners = null
    }
  }

到这里，我们就调试学习完了Redux.createSotre、store.dispatch、store.getState、store.subscribe的源码。

接下来，我们写个中间件例子，来调试中间件相关源码。

5. Redux 中间件相关源码

中间件是重点，面试官也经常问这类问题。

5.1 Redux.applyMiddleware(...middlewares)

5.1.1 准备 logger 例子调试

为了调试Redux.applyMiddleware(...middlewares)，我在examples/js/middlewares.logger.example.js写一个简单的logger例子。分别有三个logger1，logger2，logger3函数。由于都是类似，所以我在这里只展示logger1函数。

// examples/js/middlewares.logger.example.js
function logger1({ getState }) {
  return next => action => {
      console.log('will dispatch--1--next, action:', next, action)

      // Call the next dispatch method in the middleware chain.
      const returnValue = next(action)

      console.log('state after dispatch--1', getState())

      // This will likely be the action itself, unless
      // a middleware further in chain changed it.
      return returnValue
  }
}
// 省略 logger2、logger3

logger中间件函数做的事情也比较简单，返回两层函数，next就是下一个中间件函数，调用返回结果。为了让读者能看懂，我把logger1用箭头函数、logger2则用普通函数。

写好例子后，我们接着来看怎么调试Redux.applyMiddleware(...middlewares))源码。

cd redux-analysis && hs -p 5000
# 上文说过npm i -g http-server

打开http://localhost:5000/examples/index.2.redux.applyMiddleware.compose.html，按F12打开控制台，

先点击加号操作+1，把结果展示出来。

从图中可以看出，next则是下一个函数。先1-2-3，再3-2-1这样的顺序。

这种也就是我们常说的中间件，面向切面编程（AOP）。

接下来调试，在以下语句打上断点和一些你觉得重要的地方打上断点。

// examples/index.2.redux.applyMiddleware.compose.html
var store = Redux.createStore(counter, Redux.applyMiddleware(logger1, logger2,  logger3))

5.1.2 Redux.applyMiddleware(...middlewares) 源码

// redux/src/applyMiddleware.js
/**
 * ...
 * @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
    }
  }
}

// redux/src/createStore.js
export default function createStore(reducer, preloadedState, enhancer) {
  // 省略参数校验
  // 如果第二个参数`preloadedState`是函数，并且第三个参数`enhancer`是undefined，把它们互换一下。
  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 也就是`Redux.applyMiddleware`返回的函数
    // createStore 的 args 则是 `reducer, preloadedState`
    /**
     * createStore => (...args) => {
            const store = createStore(...args)
            return {
              ...store,
               dispatch,
            }
        }
     ** /
    // 最终返回增强的store对象。
    return enhancer(createStore)(reducer, preloadedState)
  }
  // 省略后续代码
}

把接收的中间件函数logger1, logger2, logger3放入到 了middlewares数组中。Redux.applyMiddleware最后返回两层函数。 把中间件函数都混入了参数getState和dispatch。

// examples/index.2.redux.applyMiddleware.compose.html
var store = Redux.createStore(counter, Redux.applyMiddleware(logger1, logger2,  logger3))

最后这句其实是返回一个增强了dispatch的store对象。

而增强的dispatch函数，则是用Redux.compose(...functions)进行串联起来执行的。

5.2 Redux.compose(...functions)

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

  if (funcs.length === 1) {
    return funcs[0]
  }

  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

// applyMiddleware.js
dispatch = compose(...chain)(store.dispatch)
// compose
funcs.reduce((a, b) => (...args) => a(b(...args)))

这两句可能不是那么好理解，可以断点多调试几次。我把箭头函数转换成普通函数。

funcs.reduce(function(a, b){
  return function(...args){
    return a(b(...args));
  };
});

其实redux源码中注释很清晰了，这个compose函数上方有一堆注释，其中有一句：组合多个函数，从右到左，比如：compose(f, g, h) 最终得到这个结果 (...args) => f(g(h(...args))).

5.2.1 compose 函数演化

看Redux.compose(...functions)函数源码后，还是不明白，不要急不要慌，吃完鸡蛋还有汤。仔细来看如何演化而来，先来简单看下如下需求。

传入一个数值，计算数值乘以10再加上10，再减去2。

实现起来很简单。

const calc = (num) => num * 10 + 10 - 2;
calc(10); // 108

但这样写有个问题，不好扩展，比如我想乘以10时就打印出结果。 为了便于扩展，我们分开写成三个函数。

const multiply = (x) => {
   const result = x * 10;
   console.log(result);
   return result;
};
const add = (y) => y + 10;
const minus = (z) => z - 2;

// 计算结果
console.log(minus(add(multiply(10))));
// 100
// 108
// 这样我们就把三个函数计算结果出来了。

再来实现一个相对通用的函数，计算这三个函数的结果。

const compose = (f, g, h) => {
  return function(x){
    return f(g(h(x)));
  }
}
const calc = compose(minus, add, multiply);
console.log(calc(10));
// 100
// 108

这样还是有问题，只支持三个函数。我想支持多个函数。 我们了解到数组的reduce方法就能实现这样的功能。 前一个函数

// 我们常用reduce来计算数值数组的总和
[1,2,3,4,5].reduce((pre, item, index, arr) => {
  console.log('(pre, item, index, arr)', pre, item, index, arr);
  // (pre, item, index, arr) 1 2 1 (5) [1, 2, 3, 4, 5]
  // (pre, item, index, arr) 3 3 2 (5) [1, 2, 3, 4, 5]
  // (pre, item, index, arr) 6 4 3 (5) [1, 2, 3, 4, 5]
  // (pre, item, index, arr) 10 5 4 (5) [1, 2, 3, 4, 5]
  return pre + item;
});
// 15

pre 是上一次返回值，在这里是数值1,3,6,10。在下一个例子中则是匿名函数。

function(x){
  return a(b(x));
}

item是2,3,4,5，在下一个例子中是minus、add、multiply。

const compose = (...funcs) => {
  return funcs.reduce((a, b) => {
    return function(x){
      return a(b(x));
    }
  })
}
const calc = compose(minus, add, multiply);
console.log(calc(10));
// 100
// 108

而Redux.compose(...functions)其实就是这样，只不过中间件是返回双层函数罢了。

所以返回的是next函数，他们串起来执行了，形成了中间件的洋葱模型。 人们都说一图胜千言。我画了一个相对简单的redux中间件原理图。

如果还不是很明白，建议按照我给出的例子，多调试。

cd redux-analysis && hs -p 5000
# 上文说过npm i -g http-server

打开http://localhost:5000/examples/index.3.html，按F12打开控制台调试。

5.2.2 前端框架的 compose 函数的实现

lodash源码中 compose函数的实现，也是类似于数组的reduce，只不过是内部实现的arrayReduce

引用自我的文章：学习lodash源码整体架构(opens new window)

// lodash源码
function baseWrapperValue(value, actions) {
	var result = value;
	// 如果是lazyWrapper的实例，则调用LazyWrapper.prototype.value 方法，也就是 lazyValue 方法
	if (result instanceof LazyWrapper) {
		result = result.value();
	}
	// 类似 [].reduce()，把上一个函数返回结果作为参数传递给下一个函数
	return arrayReduce(actions, function(result, action) {
		return action.func.apply(action.thisArg, arrayPush([result], action.args));
	}, result);
}

koa-compose源码也有compose函数的实现。实现是循环加promise。 由于代码比较长我就省略了，具体看链接若川：学习 koa 源码的整体架构，浅析koa洋葱模型原理和co原理 (opens new window)小节 koa-compose 源码（洋葱模型实现）

6. Redux.combineReducers(reducers)

打开http://localhost:5000/examples/index.4.html，按F12打开控制台，按照给出的例子，调试接下来的Redux.combineReducers(reducers)和Redux.bindActionCreators(actionCreators, dispatch)具体实现。由于文章已经很长了，这两个函数就不那么详细解释了。

combineReducers函数简单来说就是合并多个reducer为一个函数combination。

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 (typeof reducers[key] === 'function') {
      finalReducers[key] = reducers[key]
    }
  }

  // 经过一些处理后得到最后的finalReducerKeys
  const finalReducerKeys = Object.keys(finalReducers)

  // 省略一些开发环境判断的代码...

  return function combination(state = {}, action) {
    // ... 省略开发环境的一些判断

   // 用 hasChanged变量 记录前后 state 是否已经修改
    let hasChanged = false
    // 声明对象来存储下一次的state
    const nextState = {}
    //遍历 finalReducerKeys
    for (let i = 0; i < finalReducerKeys.length; i++) {
      const key = finalReducerKeys[i]
      const reducer = finalReducers[key]
      const previousStateForKey = state[key]
      // 执行 reducer
      const nextStateForKey = reducer(previousStateForKey, action)

      // 省略容错代码 ...

      nextState[key] = nextStateForKey
      // 两次 key 对比 不相等则发生改变
      hasChanged = hasChanged || nextStateForKey !== previousStateForKey
    }
    // 最后的 keys 数组对比 不相等则发生改变
    hasChanged =
      hasChanged || finalReducerKeys.length !== Object.keys(state).length
    return hasChanged ? nextState : state
  }
}

7. Redux.bindActionCreators(actionCreators, dispatch)

如果第一个参数是一个函数，那就直接返回一个函数。如果是一个对象，则遍历赋值，最终生成boundActionCreators对象。

function bindActionCreator(actionCreator, dispatch) {
  return function() {
    return dispatch(actionCreator.apply(this, arguments))
  }
}

export default function bindActionCreators(actionCreators, dispatch) {
  if (typeof actionCreators === 'function') {
    return bindActionCreator(actionCreators, dispatch)
  }

  // ... 省略一些容错判断

  const boundActionCreators = {}
  for (const key in actionCreators) {
    const actionCreator = actionCreators[key]
    if (typeof actionCreator === 'function') {
      boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)
    }
  }
  return boundActionCreators
}

redux所提供的的API 除了store.replaceReducer(nextReducer)没分析，其他都分析了。

8. vuex 和 redux 简单对比

8.1 源码实现形式

从源码实现上来看，vuex源码主要使用了构造函数，而redux则是多用函数式编程、闭包。

8.2 耦合度

vuex 与 vue 强耦合，脱离了vue则无法使用。而redux跟react没有关系，所以它可以使用于小程序或者jQuery等。如果需要和react使用，还需要结合react-redux库。

8.3 扩展

// logger 插件，具体实现省略
function logger (store) {
  console.log('store', store);
}
// 作为数组传入
new Vuex.Store({
  state,
  getters,
  actions,
  mutations,
  plugins: process.env.NODE_ENV !== 'production'
    ? [logger]
    : []
})
// vuex 源码 插件执行部分
class Store{
  constructor(){
    // 把vuex的实例对象 store整个对象传递给插件使用
    plugins.forEach(plugin => plugin(this))
  }
}

vuex实现扩展则是使用插件形式，而redux是中间件的形式。redux的中间件则是AOP（面向切面编程），redux中Redux.applyMiddleware()其实也是一个增强函数，所以也可以用户来实现增强器，所以redux生态 (opens new window)比较繁荣。

8.4 上手难易度

相对来说，vuex上手相对简单，redux相对难一些，redux涉及到一些函数式编程、高阶函数、纯函数等概念。

9. 总结

文章主要通过一步步调试的方式循序渐进地讲述redux源码的具体实现。旨在教会读者调试源码，不惧怕源码。

面试官经常喜欢考写一个redux中间件，说说redux中间件的原理。

function logger1({ getState }) {
  return next => action => {
      const returnValue = next(action)
      return returnValue
  }
}

const compose = (...funcs) => {
  if (funcs.length === 0) {
    return arg => arg
  }

  if (funcs.length === 1) {
    return funcs[0]
  }

  // 箭头函数
  // return funcs.reduce((a, b) => (...args) => a(b(...args)))
  return funcs.reduce((a, b) => {
    return function(x){
      return a(b(x));
    }
  })
}

const enhancerStore = Redux.create(reducer, Redux.applyMiddleware(logger1, ...))
enhancerStore.dispatch(action)

用户触发enhancerStore.dispatch(action)是增强后的，其实就是第一个中间件函数，中间的next是下一个中间件函数，最后next是没有增强的store.dispatch(action)。

最后再来看张redux工作流程图

是不是就更理解些了呢。

如果读者发现有不妥或可改善之处，再或者哪里没写明白的地方，欢迎评论指出。另外觉得写得不错，对你有些许帮助，可以评论、转发分享，也是对我的一种支持，非常感谢呀。要是有人说到怎么读源码，正在读文章的你能推荐我的源码系列文章，那真是太好了。

欢迎阅读我的更多文章。